スムーススクロールを作った 01

最近、仕事に使うライブラリーとかテンプレート的なものを少しずつ改良していっている一環で、スムーススクロールのライブラリを作ってみた。

機能

aタグのhref=”#”に指定したアンカーIDのブロックにスクロール。
スクロールの種類を自動設定と、時間・イージングを設定できる2種類用意。
スクロール完了時にonCompleteに渡した関数を実行できる。
任意のタイミングでスクロールイベント実行できる。
XY軸両方に対応。（デフォルトはY）
aタグのdata属性に、data-offset-yなどを指定することで、追加のオフセットを指定できる。
スマートフォン用にdata-offset-y-spも指定できる。
そのブレークポイントも指定できる。

使い方インスタンス生成とサンプル

簡単設定

インスタンスを生成すれば、自動的にhref=”#●●”にy軸のみスクロール。

const pageScrollTo = new PageScrollTo();

See the Pen Page Scroll To 01(v1.4) – 1 by s4ec (@ShinjiY) on CodePen.

ヘッダーの高さ、スクロール時間、イージング、xy軸を設定した場合

ヘッダー要素のIDを指定することで、position:fixedを使用時にスクロールの到着位置にヘッダーが重ならないようにする。
時間とイージングは同時に設定する。イージングは時間を設定しないと無効。

	const pageScrollTo = new PageScrollTo({
		offsetYElement: '#header',
		duration: 1500,
		ease: 'easeInOutCubic',
		axis: 'xy'
	});

下のサンプルでは、Block 01のリンクにdata-offset-y=”70″ data-offset-y-sp=”80″を指定してみた。

See the Pen Page Scroll To 01(v1.4) – 2 by s4ec (@ShinjiY) on CodePen.

任意のタイミングでスクロールさせる

scrollTo()メソッドを使う。第二引数にはスクロール終了に実行される関数を渡すことができる。

const pageScrollTo = new PageScrollTo();

// 1病後にスクロール
setTimeout(() => {
    pageScrollTo.scrollTo('#block04', () => {
        console.log('任意 スクロールEND');
    });
}, 1000);

その他の設定できること

const pageScrollTo = new PageScrollTo({
    offsetYElement: '#header', // オフセットY要素（id）（ヘッダーなどの高さを考慮する場合）
    offsetXElement: '#side', // オフセットX要素（id）（サイドバーなどの横幅を考慮する場合）
    maxAmount: 80, // 最大移動量 animationType01 のみ
    breakPoint: 800, // ブレークポイント（〜800px、801px〜）
    duration: 1000, // 移動時間ミリ秒（整数、0はnull扱い） animationType02 のみ
    ease: 'easeInOutCubic',// イージング ※ durationが設定されている時のみ使用 animationType02 のみ　デフォルトはeaseOutQuart
    onComplete: () => false, // スクロール完了時のコールバック関数
    axis: 'y', // スムーススクロールを適応する軸（x or y or xy）
});

durationを設定しなければ、自動設定のanimationType01になる。

イージングはとりあえず以下の3つだけ用意した。

easeInOutCubic
easeOutExpo
easeOutQuart

今後改良したいこと

あまりテストしてないので、実際使っていく途中でバグが結構ありそう。なのでそれらの修正。
個人的には必要ないと思うけど、ブロック要素にheightとoverflowを指定して、内容をスクロールさせる事にも、余裕があったら対応。