Skip to content

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

Description

@manabuyasuda

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

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,
});

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancement機能の追加や改修。機能を実装したらクローズする。

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions