Fly higher! Sky is the limit!

webの現場で働く人のブログ

[jQuery]スクロールバーのデザインと実装方法と注意点 - 超軽量スクリプト Perfect Scrollbar

一昔前だとスクロールバーのデザインモックを見ただけで吐きそうになっていましたが、 今では便利なプラグインとCSS3といった技術を用いて比較的容易に実装できるようになりました。

本記事では、超軽量スクリプト Perfect Scrollbarを用いたデザイン性に富んだスクロールバーの実装方法を紹介したいと思います。

Perfect Scrollbarについて

Perfect Scrollbarについては、3年くらい前にcoliss様のサイトで紹介されていますので そちらをご参照ください。

http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-perfect-scrollbar.html

ダウンロードはこちら

perfect-scrollbar

実装方法

準備するもの

  • jQuery
  • Perfect Scrollbar
  • HTML/CSS/JS
  • (あればデザインカンプ)

サンプルデモ

さっそくですが、今回自分が作ったサンプルを見ながら解説します。

これは線路を走る電車のつもりです...汗
サンプルデモのデザインについては、ご了承ください。

まずは、スクロールバーを出す部分を実装していきます。 f:id:paradox_tm:20160517154350p:plain

HTML

<div class="box">
 <div id="js-scroll" class="inner">
 <!-- スクロールさせるコンテンツ  -->
 </div>
</div>

.box:スクロールさせる部分を囲っています。
.inner:実際にスクロールさせる場所になります。

※ デザインによってマークアップは調整してください。

CSS

.box {
  height:320px;
  width: 320px;
  box-sizing: border-box;
  padding: 20px 30px 20px 20px;
  border: 1px dotted #333;
  margin: 50px auto;
  background-color: #fff;
}

/*こちらがスクロールさせる箇所 */
.inner {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  width: 280px;
  height: 280px;
}

それぞれのスタイルになります。こちらもデザインによって調整ください。
※ 但しスクロールさせたい箇所に「position: relative;overflow: hidden;」はつけるようにしてください。

JS

$(function() {
    $('#js-scroll').perfectScrollbar();
});

jQueryとperfectScrollbarを読み込ませた上で、指定してください。
GitHubを覗くと様々なオプションがありますが、今回はデフォルトの指定にしておきます。

気になる方は以下を参照してみてください。
https://github.com/noraesae/perfect-scrollbar

これで下準備完了です!

デザインの反映

ここでperfectScrollbar側から提供されているCSSを読み込ませると本家のサンプルデモと同じものができあがりますが、 今回はオリジナルのデザインを反映させたいのでその提供されているCSSをカスタマイズしていきます。

以下、必要な箇所を抜粋したCSSになります。

.ps-container {
  -ms-touch-action: none;
  touch-action: none;
  overflow: hidden !important;
  -ms-overflow-style: none;
}
@supports (-ms-overflow-style: none) {
  .ps-container {
    overflow: auto !important;
  }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps-container {
    overflow: auto !important;
  }
}

/*スクロールバーのレールの背景指定*/
.ps-container.ps-active-y > .ps-scrollbar-y-rail {
  display: block;
  background: url(body.jpg) center center repeat; /*色でも可能*/
}

/*スクロールバーのレールの位置の指定*/
.ps-container > .ps-scrollbar-y-rail {
  position: absolute;
  right: 6px; /*位置調整*/
  width: 15px; /*デザイン幅の指定*/
}

/*スクロールバーの指定*/
.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
  position: absolute;
  background: 
  url(head.jpg) top center no-repeat, /*スクロールバーを三分割したうちの上矢印の部分*/
  url(foot.jpg) bottom center no-repeat, /*スクロールバーを三分割したうちの下矢印の部分*/
  url(body.jpg) center center repeat; /*スクロールバーを三分割したうちのお腹の部分(リピートできるもの)*/
  right: -2px; /*位置調整*/
  width: 19px; /*デザイン幅の指定*/
}

ポイントは、以下の通りです。

  • スクロールバーのレールの背景の切り出し(リピートできるもの)
  • スクロールバーのデザイン部分を三分割し、上矢印部分(固定)/下矢印部分(固定)/お腹の部分(リピート) に分けて3枚の背景画像を指定
  • それぞれの位置調整と幅調整

f:id:paradox_tm:20160517154359p:plain

この3点を守れば、素敵なスクロールバーが実装できます。
今回は、縦スクロールで実装しましたが、横スクロールの場合も同じです。

デザインの注意点

デザインを反映する上での注意ですが、スクロールバーは可変になります。スクロール量(コンテンツ量)が増えれば、当然スクロールバーの長さも変わります。

実装できない(厳密には、不自然になる)デザインは、スクロールバーの大きさが固定のものです。 またスクロールバーのお腹のリピート部分が不規則な形になると繋ぎ目が美しくなくなってしまいます...(今回のデモサンプルのように...)

以上です!

デザイン次第でかなり素敵なものができそうですね!