横スクロール可にしてスクロールヒントを 表示させよう!
Share
こんなことを説明しています!
- overflow: scroll-xを使って外側の要素を固定し、内側の要素をスクロールできるようにする
- スクロールヒントを表示させる
解説動画
コードの解説
HTMLの記述
<div class="inner"> <h2 class="title">横スクロール可にして<br>スクロールヒントを入れよう</h2> <div class="img-wrap js-scrollable"> <img src='./img/img1.jpg' alt='' width='1200' height='600' loading='lazy'> </div> </div>
ポイント
- スクロールさせたい要素をwrapなどで囲む
- その親要素にscroll-hintを入れるためのclass[js-scrollable]を記述
CSSの記述
// ==================== // レイアウトを整えるcss // ==================== .inner { width: 100%; max-width: 1400px; margin: auto; padding: 0 40px; } .title { font-size: 40px; font-weight: 700; margin: 80px 0; text-align: center; } // ==================== // 今回のテーマ // ==================== .img-wrap { width: 100%; overflow-x: scroll; border: 8px solid blue; padding-bottom: 20px; } img { width: 1200px; height: 600px; object-fit: cover; }
ポイント
- 親要素:表示させたい幅を指定
- 親要素:overflow-x:scroll; で要素内の横スクロールを許可
- 子要素:中身の実際の幅を指定
JavaScriptの記述
// デフォルトのままで良い場合 // new ScrollHint('.js-scrollable'); //カスタマイズしたい場合 new ScrollHint('.js-scrollable', { scrollHintIconAppendClass: 'scroll-hint-icon-white',//背景を白に i18n: { scrollable: 'スクロールできます' //表示されるテキストを変更 } });
ポイント
-
使えるようにするためにはscroll-hint.cssとscroll-hint.min.jsを入れる。
(下記参照) - カスタマイズをする必要がない場合は、上の部分の1行だけでOK
- [js-scrollable] の部分はhtmlで記述したものに合わせる
- 日本語にしたり、背景を白にしたい場合は2行目以降のように関数にして記述
CDN読み込みの場合
以下のタグをhead内に読み込む
<link rel="stylesheet" href="https://unpkg.com/scroll-hint@1.1.10/css/scroll-hint.css"> <script src="https://unpkg.com/scroll-hint@1.1.10/js/scroll-hint.js"></script>
ダウンロードする場合
ScrollHintの公式ページの「Download」ボタンをクリックすると、ファイル一式をダウンロードできます。