JavaScriptプログラムに関する各種メモ書き

ES6( ECMAScript 2015)フレンドリー + 他ライブラリ非依存のスムーススクロール sweet-scroll.js

● sweet-scroll.js

http://webdesign-dackel.com/2015/12/17/sweet-scroll/

  • MIT ライセンス
  • 動作が軽快
  • 他の JavaScriptライブラリに依存しない
  • 設置も超カンタン
  • webpackやbrowserify対応
  • スムーズスクロール(イージング)対応

のことから使わない理由がみつかりません。おすすめです。

単独で使用するには

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

で読み込んで

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,               // ホイール・タッチイベントが発生した時にスクロールを停止
  // call back function
  beforeScroll: null,             // スクロールが始まる前 (return falseでキャンセル可)
  afterScroll: null,              // スクロールが終わった時
  cancelScroll: null              // スクロールがキャンセルされた時
}
No.1036
01/03 19:31

edit