WebDesign Dackel

ES6フレンドリーなスムーススクロール「sweet-scroll.js」を作りました

ES6フレンドリーなスムーススクロール「sweet-scroll.js」を作りました

Hatena0
Google+0
Pocket0
Feedly0

ES6フレンドリー、かつ依存無しで動かせるスムーススクロールライブラリを作り、npmに公開しました。

実際ブログに組み込んだり、それ以外でもちょこちょこと使ってみて、普通に使えるようになってきたのでご紹介したいと思います。

リポジトリは以下になります。

tsuyoshiwada/sweet-scroll

ちなみに、名前に付いているsweetの由来は「何となくカワイイから」です!

動作のサンプル

Exampleから、サンプルの動作を見れるので是非確認してみてください。

sweet-scroll.js

イージングをeaseOutBounceにすると、ぽよんぽよんスクロールしてカワイイです。(実際使うかどうかは微妙…)

イージングの動作イメージ

sweet-scroll.jsの特徴

一つ一つ詳しく紹介は出来ませんが、特徴を挙げると以下の様な内容です。

  • 依存関係無しで使える (重要!!)
  • ES6フレンドリーなインターフェースで使える
  • アニメーションにはrequestAnimationFrameを使い、ヌルヌル動く
  • 動的に追加した<a>などのトリガに対応
  • イージングの種類が無駄に豊富
  • overflow: scrollを使ったボックス要素でも使える
  • 縦横のスクロールをサポート
  • 相対的なスクロール移動など、柔軟な指定が出来る
  • スクロールの途中でホイールやタッチイベントが発生するとアニメーションを停止
  • 固定ヘッダを使った時にスクロール位置がずれる場合にも対応
  • IE9もサポート!!

jQueryに依存しないスムーススクロールで有名なライブラリだと、jump.jssmooth-scroll.jsがあります。

それらの良いと思った点は積極的に取り入れて、更に自分が欲しかった機能を盛り込んだ感じです。

インストール・ダウンロード

npmの場合

browserifywebpack環境下で使う場合は、npmを使ってインストールします。

$ npm install sweet-scroll

コード内での読み込みは以下。

import SweetScroll from "sweet-scroll"

scriptタグを使う場合

sweet-scroll.min.jsを下記どちらかのページからダウンロードします。

ダウンロードが終わったら、いつも通りHTML<script>で追加します。

<script src="sweet-scroll.min.js"></script>

使い方

スムーススクロールのトリガーとなる要素にdata-scroll属性を追加します。

<a href="#header" data-scroll>ページ上部へ</a>

あとはSweetScrollのインスタンスを生成するだけで動作します。

const sweetScroll = new SweetScroll();

基本的な使い方はこれだけです。
smooth-scroll.jsをデフォルトの設定で使っている場合は、HTMLの変更なく導入できるようになっています。

カスタマイズして使う

SweetScrollのコンストラクタにオプションを渡すことで、イージングやアニメーションの時間を変更することが出来ます。

const sweetScroll = new SweetScroll({/* オプション */});

デフォルトで適用されるオプションは以下。

{
  trigger: "[data-scroll]",       // トリガーとなる要素をCSSセレクタで指定
  header: "[data-scroll-header]", // 固定ヘッダをCSSセレクタで指定
  duration: 1000,                 // アニメーション再生時間のミリ秒
  delay: 0,                       // アニメーション開始までの遅延ミリ秒
  easing: "easeOutQuint",         // イージングのタイプ
  offset: 0,                      // スクロール位置のオフセット
  verticalScroll: true,           // 垂直方向のスクロールを許可
  horizontalScroll: false,        // 水平方向のスクロールを許可 (デフォルトでは無効)
  stopScroll: true,               // ホイール・タッチイベントが発生した時にスクロールを停止

  // Callbacks
  beforeScroll: null,             // スクロールが始まる前 (return falseでキャンセル可)
  afterScroll: null,              // スクロールが終わった時
  cancelScroll: null              // スクロールがキャンセルされた時
}

例えば、data-scroll属性をつけるのではなく、単純に#で始まる全てのページ内リンクをトリガーとしたい場合は、以下のように指定します。

HTML:

<a href="#">Page top</a>

JS:

const sweetScroll = new SweetScroll({
  trigger: "a[href^='#']"
});

まんまCSSセレクタで書けるので簡単です。

overflow:scroll なボックスの場合

あまり多くはありませんが、ページ全体を囲むラッパーや、ページの一部をスクロールさせたい場合があります。

その場合、コンストラクタの第2引数にCSSセレクタか直接HTMLElementを指定します。

const sweetScroll = new SweetScroll({/*...*/}, "#container");

// または

const container = document.getElementById("#container");
const sweetScroll = new SweetScroll({/*...*/}, container);

インスタンスには幾つかメソッドを用意していますが、ここでは省略しますので詳しくはREADMEをご確認くださいませ。

tsuyoshiwada/sweet-scroll

おわりに

「ちょうど単体で動くスムーススクロール探してたんだよね〜」という方に使ってみていただけると嬉しいです。
バグや機能についてご意見ありましたら、@wadackelIssuesまでコンタクトいただけたらと思いまーす!


Twitterで「作ったー」的なツイートをしたところ、尊敬するエンジニアさんである@bokuweb17さんから、早速Issuesを頂き修正を反映しました。(人生初Issues!!)
ありがとうございました!