A Pen by Ziogas Chris.

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

60fps scrolling using pointer-events: none

Avoiding unnecessary paints through disabling hover effects as the user scrolls

http://www.thecssninja.com/javascript/pointer-events-60fps

A Pen by Ziogas Chris on CodePen.

License.

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>

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);

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;
  }
}