スクロールジャンク

ontouchstartでスマホサイトにhoverアクションを適応した場合スクロールがカクカクしてたので対策する

今までスマホサイトにhoverアクションを効かせるために「ontouchstart」を<body>タグ辺りに追加していたのですが、どうもスクロール時に、スクロールが指についてこないなどの現象がありました。この現象のことを「スクロールジャンク」と言うそうです。
スクロールジャンクが起きている時の検証動画がありますので一度ご確認ください。

動画左側がスクロールジャンクを起こしていますが、どう見ても快適な操作性とは言い難いものがありますね。

スクロールジャンクへの対策

このスクロールジャンクを解消させるには「Passive Event Listener」を使い、スクロールのパフォーマンスを向上させることができます。詳細は「Passive Event Listenerを使用してサイトでのスクロールパフォーマンスを向上させる」を御覧ください。

「Passive Event Listener」を使用するには、<body>タグ等に「ontouchstart」を指定している場合は削除してください。そして、以下のJavaScriptを読み込ませます。

まとめ

「ontouchstart」をつけた時になぜか、スクロールがカクカクしていて、結構ストレスに感じていましたが、このJavaScriptを使ってからは、快適にスクロールしています。もちろんhoverアクションも動作していて満足しています。もし、同じことで悩んでいる人がいましたらご参考にしてください。


著者について

Junji Yamamoto

広島県広島市育ち、現在岡山でWeb制作の仕事をしています。主に「Web関連で勉強したこと、役立つアイディア」をテーマにした内容を備忘録としてブログに書いています。大学卒業後は勤務している会社のWeb制作を担当。小規模サイトから大学公式サイトの制作・運営などに携わっています。

JunJunWeb.Netの新着情報を受け取るには
SNSアカウントをフォローすると便利