Skip to content

Instantly share code, notes, and snippets.

@pbojinov
Last active December 17, 2015 08:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pbojinov/5580793 to your computer and use it in GitHub Desktop.
Save pbojinov/5580793 to your computer and use it in GitHub Desktop.
Disable Hover on Scroll based on Unnecessary Paints - http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/
// Used to track the enabling of hover effects
var enableTimer = 0;
/*
* Listen for a scroll and use that to remove
* the possibility of hover effects
*/
window.addEventListener('scroll', function() {
clearTimeout(enableTimer);
removeHoverClass();
// enable after 1 second, choose your own value here!
enableTimer = setTimeout(addHoverClass, 1000);
}, false);
/**
* Removes the hover class from the body. Hover styles
* are reliant on this class being present
*/
function removeHoverClass() {
document.body.classList.remove('hover');
}
/**
* Adds the hover class to the body. Hover styles
* are reliant on this class being present
*/
function addHoverClass() {
document.body.classList.add('hover');
}
/**
* Expect the hover class to be on the body
* before doing any hover effects
*
* As you can see we use a class on the body to track whether or not hover effects are "allowed", and the underlying styles rely on this class to be present:
.hover .block:hover {
}
*
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment