Webサイトを閲覧している時にスクロールがガタついたり、スクロール中にページの下の方が真っ白になっているサイトを見たことはありませんか？もしかしたら、それはホバーエフェクトによるものかもしれません。
問題点
スクロール中でもホバーエフェクトは有効なので、スクロールによってホバーが連続的に有効になるとブラウザに大きな負荷を与えてしまいます。
この動画ではホバーがブラウザに与える負荷について詳しく説明しています。（英語です。）
解決方法
スクロール開始時にbodyにpointer-eventsプロパティーを設定する事によって、スクロール中のホバーを無効にすることができます。
コードは次のとおりです。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | var body = document.body, timer; window.addEventListener('scroll', function() { clearTimeout(timer); if(!body.classList.contains('disable-hover')) { body.classList.add('disable-hover') } timer = setTimeout(function(){ body.classList.remove('disable-hover') },500); }, false); |
| 1 2 3 | .disable-hover { pointer-events: none; } |
このJSとCSSを追加することによってスクロール中のホバーを無効化することができます。スクロール中のパフォーマンスに問題がある場合は是非試してみてください。