pbojinov
5/15/2013 - 12:21 AM

Disable Hover on Scroll based on Unnecessary Paints - http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/

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 {
   …
   }
 *   
 */