スクロールジャンク

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

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

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

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

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

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

まとめ

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


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