scrollerでスクロールバーをカスタマイズする方法【jQuery】こんにちは、WEBの佐野です。今回はWEB制作に役立つスクロールバーのデザイン変更の話になります。通常のWEBサイト制作では中々スクロールバーのデザインが気になる場面って少ないかと思いますが、モーダル等の小さいコンテンツにcssでスクロールを表示させた時、デフォルトのスクロールバーが表示されて、見た目が浮いてしまう...何てことがあるかと思います。scroller」を紹介します。scrollerはブラウザのスクロールバーのデザインを変更できるjQueryプラグインです。現在は-webkit-(chrome・safari)のみcssでデザイン変更できますが、その他のブラウザは対応していないので幅広く対応しているこのプラグインはかなり優秀なものとなっています。実際のスクロールバーのデザインを変更しているわけではなく、css+jsで疑似的にスクロールを表現しているものなのでスクロールに対してjs処理(TOPへ戻るなど)を設定している場合は調整が必要になるので注意が必要です。scrollerでスクロールバーを変更したイメージはこんな感じになります。どんなデザインでも浮くことがない様なスマートなスクロールバーが実装できます。色やデザインはいくつかテーマで用意されているので3種類ほど。使い方は凄く簡単で、まずは下記のサイトからファイルをダウンロードします。scroller必要なファイルは以下の2ファイルのみ。・jquery.mCustomScrollbar.min.css・jquery.mCustomScrollbar.min.jsこれを実装するhtmlファイルで読み込ませれば準備OKです!コードの書き方HTMLはcssのoverflowを使う時と同じ構成で組んでください。下のコードでスクロールを出す場合はCSSクラスのscroll-areaを指定したdivにoverflowを指定しますが、このプラグインを使用する場合はoverflowの指定は不要となります。ここに記述したものがスクロールで表示されます。</body>JavaScriptにはデフォルトの場合、1行の記述でスクロールを変更できます。セレクタには上のhtmlで実装する場合のscroll-areaを使用しています。</script>オプション基本的には上記の記述だけで事足りそうですが、サンプルの様にテーマを変えたり、TOPに戻るなどのスクロールへの処理を実装する為のオプションを少しだけ紹介します。テーマの変更プラグインで用意されているテーマは下記で一通り見る事ができます。demoこちらに書かれているテーマの名前をパラメータに設定すれば変更が可能です。</script>自動スクロールTOPに戻るやコンテンツ内のスクロールに使用できるscrollToオプションです。引数の2つ目には位置を指定しており、下記参考では一番上に戻る様に”0′′をしています。位置は%やpxの指定や”top”や”bottom”と言った指定も可能です。</script>また、スクロールにかかる時間もミリ秒で指定できます。</script>他にも色々なオプションが公式サイトで説明がされているので興味があれば確認してください!最後にスクロールデザインの変更は無さそうで意外とある事だと思うので、使った事が無い方はぜひ1度使ってみてください。手軽にオシャレに出来て感動します。ZBr...2018/7/13メニューを閉じるCONTACTゲーム開発、Webサイト制作に関するご相談等ございましたら、お気軽にお問い合わせください。