Skip to content

Instantly share code, notes, and snippets.

@sdthornton

sdthornton/Reduce Browser Paint While Scrolling

Last active December 17, 2015 16:19
Show Gist options
  • Save sdthornton/5638049 to your computer and use it in GitHub Desktop.
Save sdthornton/5638049 to your computer and use it in GitHub Desktop.
Download ZIP
Small JS to add and remove the .hover class from the <html> tag during scrolling. Prepending the .hover class before all :hover or transition declarations in your css makes it so that hovers and transitions are only painted when not scrolling, which greatly increases page speed and scrolling smoothness.
Raw
Reduce Browser Paint While Scrolling
var reducePaintOnScroll = (function() {
var enableTimer = 0;
window.addEventListener('scroll', function() {
clearTimeout(enableTimer);
removeHoverClass();
enableTimer = setTimeout(addHoverClass, 200);
}, false);
function removeHoverClass() {
document.documentElement.classList.remove('hover');
}
function addHoverClass() {
document.documentElement.classList.add('hover');
}
return this;
})();
@sdthornton
Copy link
Author

Example CSS to go with JS:

Rather than writing:

.foo:hover {
   background: #000;
}

write:

.hover .foo:hover {
  background: #000;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment