ScrollHint を使ってみる

1. このページの目的

ScrollHint を使ってみる。

2. デモ

指定した要素内の横幅が画面幅を超えると、その旨を伝える画像がその箇所に表示される。

ユーザーに対して「ここは横スクロールできるよ」と伝えることができる。

3. このページで使っているコード

<link rel="preload" as="style" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css">
<link rel="stylesheet" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css">
<script defer src="https://unpkg.com/scroll-hint@latest/js/scroll-hint.min.js"></script>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
  new ScrollHint('.js-scrollable');
});
</script>

• CSSファイルの読み込みタイミングを早めるため、preload している。
• JavaScriptコードは DOMContentLoaded イベントで実行するようにしている。
• scroll-hint.css
• scroll-hint.min.js

4. メモ

CWV への影響

• レンダリングの最初の時点で必要な処理ではないので、ユーザー・インタラクティブな操作をトリガーとして読み込んでもよさそう。それなら CWV への悪影響もない。
• Webページのパフォーマンスに影響を与えずに導入できるはず。

5. 参考

• ScrollHint