60fps scrolling using pointer-events: none | The CSS Ninja - All things CSS, JavaScript & HTML

60fps scrolling using pointer-events: none | The CSS Ninja - All things CSS, JavaScript & HTML @paul_irish Easy. Apply "pointer-events: none" to the on scrollstart and remove it on scrollend. @tabatkins Avoiding Unnecessary Paints - HTML5 Rocks

The trick here is to attach a scroll handler that will disable hover effects and set a timer for enabling them again. That means we are guaranteeing that when you scroll we won't need to perform any expensive interaction paints. When you've stopped for long enough we figure it's safe to switch them back on again.