WEBTODESIGN

【ScrollBooster】ドラッグ操作を可能にするJSライブラリ

自動再生やループがない、単純な横スクロールコンテンツを実装する際、カルーセルスライダーライブラリを使うとちょっとコストが高い…ちょっとしたバグなんかもあったりして。

もっとシンプルにできないか…！と考えて、スライド自体はCSSで完結し、ドラッグ機能でJSライブラリを使うことにしました。

ドラッグ操作を可能にする「ScrollBooster」

ScrollBoosterのデモはこちら。

横スクロールのドラッグだけでなく、縦のドラッグも指定できます。

縦横無尽にドラッグ可能！

慣性があるのがいいですね◎

HTMLの下準備

HTMLの構造は以下のように、スクロールしたいコンテンツをdivなどで内包します。

<div class="wrapper">
    <ul>
        <li></li>
        ～
        <li></li>
    </ul>
</div>

クラス名は「wrapper」である必要はないです。jsで好きなクラス名やID名を指定できます。

ライブラリの読み込み

まずは、公式のGitHubのdistフォルダのscrollbooster.min.jsファイルをダウンロードし、自分のscriptファイルより前に外部ファイルとして読み込みます。

ドラッグの設定

以下のjsコードにて、設定を有効化してオプションを設定します。

new ScrollBooster({
    viewport: document.querySelector('.wrapper'),
    scrollMode: 'transform',
    direction: 'horizontal'
});

オプションはデモが分かりやすいです。

スマホでの挙動

デモでは、横スクロール中は画面全体の縦スクロールは動かないようになっているのですが…。

私の環境では横スクロール中も縦スクロールが動いてしまい、動作がモサモサになってしまいました。

なので、タッチデバイスではscrollBoosterは無効になるようにしました。（タッチデバイスではデフォルトでドラッグ操作が可能なため。）

以下のCSSも追加しました。

.wrapper{
    overflow: auto;
}
.wrapper::-webkit-scrollbar{
    display:none;
}

::-webkit-scrollbarはスクロールバーの設定です。display:noneでスクロールバーを消しています。

RECOMMENDATION

NEWEST