Disable pointer events to improve scrolling performance on websites that have many hover effects.

Add a class while user is scrolling.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);

Disable Pointer Events.css

.disable-hover,
.disable-hover * {
  pointer-events: none !important;
}

Would this not benefit from a debounce?

Hello @joebentaylor1995 ,

I am sure it would. I generally debounce several things. I would just place this in the debounce function for the site.

I have not looked into it recently. I would think you could most likely find a better way of doing this than I did 8 + years ago. I wouldn't trust this as a source of truth. I haven't updated these Gists in a very very long time. They are generally geared to my specific use cases in a few custom CMS systems I worked on during this time frame.