Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
manabuyasuda opened this issue Feb 19, 2020 · 0 comments
Open

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

manabuyasuda opened this issue Feb 19, 2020 · 0 comments
Labels
enhancement 機能の追加や改修。機能を実装したらクローズする。
Projects

Comments

@manabuyasuda
Copy link
Owner

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

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 manabuyasuda added the enhancement 機能の追加や改修。機能を実装したらクローズする。 label Feb 19, 2020
@manabuyasuda manabuyasuda added this to To do in v4 via automation Feb 19, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement 機能の追加や改修。機能を実装したらクローズする。
Projects
v4
  
To do
Development

No branches or pull requests

1 participant