横スクロール可能な要素を視覚的に分かりやすくする「ScrollHint」ライブラリの利用方法
2024/09/27
横長のtableを設置し、CSSのoverflowで横スクロール可能にしてもユーザによってはその要素がスクロール可能というのを気付かなかったりする。これを視覚的に分かりやすくしたいと思い調べたところJavaScriptの「ScrollHint」ライブラリが良さそう。以下にサンプルと利用方法をメモ。
サンプル
https://taitan916.info/sample/ScrollHint/
ScrollHint
公式サイト
https://appleple.github.io/scroll-hint/
CDN
CDNで使う場合は以下を記述する。
<link rel="stylesheet" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css"> <script src="https://unpkg.com/scroll-hint@latest/js/scroll-hint.min.js"></script>
利用方法
ソースコード
<style> .contents{ width: 200px; overflow: auto; white-space: nowrap; height: 200px; border: 1px solid #ccc; } </style> <div class="contents"> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ/ </div> <link rel="stylesheet" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css"> <script src="https://unpkg.com/scroll-hint@latest/js/scroll-hint.min.js"></script> <script> new ScrollHint('.contents', { i18n: { scrollable: 'スクロールできます', //表示テキスト }, }); </script>
オプション項目について
設定可能なオプション項目はこちらのページを参照すること。
所感
縦スクロールにも対応してくれれば良かったんだけど、対応していないっぽい。
縦スクロールの場合はSimpleBarライブラリで装飾するのが良いかも。
関連記事
-
JavaScriptにて「QRCode.js」ライブラリを利用してQRコードを生成する方法
PHPが使えない環境で動的にQRコードを生成したかった。以前にメモしたAPI等の ...
-
jQueryの通知メッセージ用ライブラリ「Toastr」の利用方法
あるサイトのソースコードを拝見しているとToastrというJSファイルをCDNで ...
-
JavaScriptにて領収書等のテンプレートHTMLページをPDFファイル化させる方法(html2pdf)
JavaScriptにてhtml2pdfというライブラリを使用することでHTML ...
-
JavaScriptでlocalStorageを簡単に操作できる「store.js」ライブラリの利用方法
以前Dexie.jsを利用してIndexedDBを取り扱う方法をメモしたが、今回 ...
-
JavaScriptでWebカメラやスマホカメラを利用してQRコードを読み取りURLを返す方法
JavaScriptのjsQRというライブラリで簡単にWebページ版QRコードリ ...