勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

横スクロール可能な要素を視覚的に分かりやすくする「ScrollHint」ライブラリの利用方法

   2024/09/27  JavaScript

横長の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

  関連記事

JavaScriptの動画プレイヤー用ライブラリ「Plyr」の利用方法

先日JavaScriptの動画プレイヤー用ライブラリ「Video.js」を試した ...

JavaScriptでフォームのバリデート時に便利な「validator.js」ライブラリの利用方法

JavaScriptでフォームのバリデートを行う際、「半角英数字 正規表現」等で ...

JavaScriptのHTTPクライアントライブラリ「AXIOS」の使い方

あるサイトのソースコードを拝見しているとAXIOSというJSファイルをCDN呼び ...

JavaScriptのマップ用ライブラリ「MapLibre GL JS」の利用方法

あるサイトをWappalyzerで調査していた際に「MapLibre GL JS ...

ページ内のスクロールバーを見やすく且つ異なるブラウザ間でも同じデザインにする「SimpleBar」ライブラリの利用方法

CSSのoverflowでスクロールバーを設置した際、ブラウザによってデザイン( ...