sweet-scroll.jsの1.0.0をリリースした

去年の末に、jQuery無しで動かせて、ES2015フレンドリーな感じのスムーススクロール用ライブラリ、sweet-scroll.jsを公開したのですが、ブログ以外のサイトで使ってみたりIssueもらった内容の改善を経て、v1.0.0(メジャーバージョン)をリリースしました。

どのタイミングでメジャーバージョンに上げるか迷ったのですが、今後大きく機能が変わることは無さそうだなと感じたので、このタイミングです。

改善した部分や、その他雑感についてまとめました。

公開した際の記事は以下。

ES6フレンドリーなスムーススクロール「sweet-scroll.js」を作りました | WebDesign Dackel

リポジトリは以下です。

tsuyoshiwada/sweet-scroll

改善点

  • updateURLオプションの追加 (スクロール完了後に#を書き換え)
  • 以下のコールバックオプションを追加
    • initialized (インスタンスの初期化完了時に実行)
    • completeScroll (スクロールがキャンセル、又はキャンセルした際に実行)
    • stepScroll (スクロール中、各アニメーションフレームで実行)
  • 継承クラスで各コールバックを捕捉出来るように
  • 連続してアニメーションを実行した際の挙動を修正

普通に使う分に一番大きく変わったのは、updateURLオプション、completeScrollコールバックの追加かなと思います。

スクロール完了時にURLを更新する

あるブランドサイトを作っている時に、スムーススクロールが完了したらURLを書き換える必要があったので機能として追加しました。
ライブラリ自体はIE9から動作しますが、このオプションについてはpushState/replaceStateを使うため、IE10+の対応です。

以下の様な指定となります。

const sweetScroll = new SweetScroll({
  updateURL: true
});

これでスクロールが完了したら、URLの更新が行われます。

デフォルトではpushStateを使って、URLの更新が履歴として残るようになっていますが、前のページに戻る際のストレスになってしまうような場合もあります。

そんな時にupdateURLに対して、"replace"を渡すことで内部的にreplaceStateを使うため、履歴を汚さずにハッシュの変更のみ出来るようになります。

const sweetScroll = new SweetScroll({
  updateURL: "replace"
});

異なるページ間でスムーススクロールする

ページを開き、URLにある#(ハッシュ)と対応した要素がある場合にもスムーススクロールをしたい場合もあります。
個人的には必要ない機能だと思っていたのですが、先ほどのブランドサイト構築時に必要になりました…。

updateURLオプションの組み合わせを使って、以下の様なコードを使うことで実現できます。

const sweetScroll = new SweetScroll();
const hash = window.location.hash;
let needsInitialScroll = false;

document.addEventListener("DOMContentLoaded", function() {
  needsInitialScroll = document.getElementById(hash.substr(1)) != null;
  if (needsInitialScroll) {
    window.location.hash = "";
  }
}, false);

window.addEventListener("load", function() {
  if (needsInitialScroll) {
    sweetScroll.to(hash, {updateURL: "replace"});
  }
}, false);

この機能は、それほど重要視していなかったので内部的に処理するようにはせず、あくまでカスタマイズ例としてREADMEに書く程度にしました。

雑感など

jQueryとか、外部ライブラリ無しでどのくらいJavaScript書けんの自分?」というところからのスタートだったので、思いつく限り機能盛り込んで、細かい調整も色々と出来るようにしていった結果、minifyしたファイルで15KB前後と比較的大きなものになってしまいました。

よっぽどファイルサイズに拘らないかぎりあまり問題は無さそうですが、これを使うのは、他の単体で動くスムーススクロールライブラリで出来ないことが出てきたタイミングでもいいのかなと思います。


リリースから半年近く経って、24 releasesでv1.0.0としてリリースしました。

自分の作ったものの中ではGitHubで一番スターをもらえたので大満足です(それでも20前後ですが…)。
ただ、少しでも反響をもらえたことで、もっと精進して良いライブラリを作ったり、積極的に他のライブラリへコントリビュートしたりしていきたいなぁと思えました。

Newer Post りだっくすさが(redux-saga)に入門する Older Post Sassのmap操作をおさらいする+便利な関数をいくつか