スクロール中はHoverエフェクトを切ろう

Webサイトを閲覧している時にスクロールがガタついたり、スクロール中にページの下の方が真っ白になっているサイトを見たことはありませんか?もしかしたら、それはホバーエフェクトによるものかもしれません。

問題点

スクロール中でもホバーエフェクトは有効なので、スクロールによってホバーが連続的に有効になるとブラウザに大きな負荷を与えてしまいます。

この動画ではホバーがブラウザに与える負荷について詳しく説明しています。(英語です。)

解決方法

スクロール開始時にbodyにpointer-eventsプロパティーを設定する事によって、スクロール中のホバーを無効にすることができます。
コードは次のとおりです。

このJSとCSSを追加することによってスクロール中のホバーを無効化することができます。スクロール中のパフォーマンスに問題がある場合は是非試してみてください。

関連記事


Pjax Blog – Free WordPress Theme
Pjax Blogにはブログ作成に必要な機能が全て含まれています。初期設定はテンプレートを読み込むだけなので、PCが苦手の方でも大丈夫です!

もっとみる

最新記事