Skip to content

Instantly share code, notes, and snippets.

@ziogaschr

ziogaschr/60fps-scrolling-using-pointer-events:-none.markdown

Created December 2, 2013 08:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ziogaschr/7746704 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ziogaschr/7746704 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Ziogas Chris.
Raw
60fps-scrolling-using-pointer-events:-none.markdown
Raw
index.html
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
Raw
script.js
var body = document.body,
timer;
window.addEventListener('scroll', function() {
clearTimeout(timer);
if(!body.classList.contains('disable-hover')) {
body.classList.add('disable-hover')
}
timer = setTimeout(function(){
body.classList.remove('disable-hover')
},500);
}, false);
Raw
style.scss
@import "compass";
.disable-hover {
pointer-events: none;
}
.element {
margin-bottom: 10px;
box-shadow: 1px 1px 1px #000;
&:hover {
box-shadow: 1px 1px 3px red;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment