website-template icon indicating copy to clipboard operation
website-template copied to clipboard

Improve: スムーススクロールの設定を統一する

Open manabuyasuda opened this issue 4 years ago • 0 comments

以下のように設定して、デフォルト値を統一したままインスタンス化できるようにしておく。

import SweetScroll from 'sweet-scroll';

/**
 * ハッシュ付きのリンクをスムーススクロールで移動します。
 * https://github.com/tsuyoshiwada/sweet-scroll
 * import scroller from './scroller';
 * scroller.toElement(document.getElementById('elm'));
 */
export default new SweetScroll({
  header: '#v1-header__head, #v1-header__body', // 固定ヘッダをCSSセレクタで指定
  duration: 1000, // アニメーション再生時間のミリ秒
  easing: 'easeOutQuint', // イージングのタイプ
  offset: 0, // スクロール位置のオフセット
  vertical: true, // 垂直方向のスクロールを許可する
  horizontal: false, // 水平方向のスクロールを許可する
  cancellable: true, // ホイールやタッチイベント発生時にスクロールを停止する
  updateURL: true, // スクロール完了後にURLを更新する
  preventDefault: true, // コンテナ要素のクリックイベントを防止する
  stopPropagation: true, // コンテナ要素のバブリングを防止する

  // スクロール先要素にフォーカスを変更する
  after(offset, $trigger, scrollElement) {
    if (scrollElement.ctx.hash) {
      const destination = document.getElementById(scrollElement.ctx.hash.replace('#', ''));
      destination.setAttribute('tabindex', '-1');
      destination.focus();
    }
  },
});

設定の上書きはupdate()が用意されている。

scroller.update({
  trigger: 'a[href^="#"]',
  duration: 3000,
});

manabuyasuda avatar Feb 19 '20 10:02 manabuyasuda