Menu
I'm doing a mobile (responsive to be exact) version of an already existing desktop site that already has a lot of hefty hover effects on it. It often happens, than when I scroll it on mobile by touching the screen it fires some performance heavy hover actions like fading in a big box-shadow and/or animating border. I don't need that on mobile browser for obvious reasons and I've heard that just disabling hovers on scroll for mobile devices can result in a big performance gains.
Is there a way to easily, temporarily disable all hover effects for the time of scrolling on mobile devices only? Is it safe (from UX perspective) and is it worth implementing (from performance perspective)?
632
You could set for all of the hover effects to only occur when the body has a certain class. Which would allow you to simply add / remove that class when you want to toggle the effects.
HTML
<body class="alloweffects">
<a>Some text</a>
</body>
CSS
.alloweffects a:hover {
color:red;
}
Then,to only prevent effects during scrolling you can simply listen to the scroll event and set the class accordingly.
Regarding performance:
I believe that the performance gain will be minimal but it'll probably vary on different browsers & devices.
But basically it should mean less event listeners, meaning more memory to deal with other things, scrolling is among them.
if we're talking about large amounts of elements I believe that the performance gain will be more significant - especially on weak devices.
92
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
