危機にwhatしているものをすぐに見たい人のために： 図書館の例 。 「Load Scrollbar！」ボタンをクリックして、結果を確認します。
サイトページのコンテンツのナビゲーションをより便利にする方法について他の人に食料を提供するために、私は長い間この小さなアイデアを実現したいと考えていました。
大多数のサイトのユーザビリティには1つの問題があり、それが私を非常に悩ましています。 問題の本質は、 ページ上のすべてのコンテンツの何パーセントが実際にそれの最も重要な部分であるかを知る機会がないという事実にあります。 または、サイトに次々に移動するブロックが多数ある場合は、それらをすばやく切り替えることはできません。
ブラウザの右側に、現在のブロックの最後までスクロールする残りの量、およびこのページの他のブロックでそれらにアクセスできるブロックを表示する小さなパネルがあると便利な、少なくとも2つの典型的な状況があります。 。
最初の状況 ：Habrahabrのようなサイト。 Habrの記事は常にコンテンツとコメントです。 個人的に、私は主に記事の内容に興味があります。 読み始めると、最初に出てくる質問は、記事が終わる瞬間まであとどれだけ読むべきかということです。 現在、私のスライダーはページ全体の15％の位置にあります。 そして、彼女にはすでにいくつのコメントが書かれていますか？ 記事の最後までスクロールするまでわかりません...そして、スクロールする必要があります。
このオプションの別のバージョンは、記事に関する他の人の意見をすぐに読みたい状況です。 つまり、それを読むことが理にかなっているかどうかを評価するためです。 コメント付きでブロックに直接移動できると便利です。
2番目の状況 ：さまざまなオンラインストアとリンク先。ページがさまざまな情報ブロックに分割され、その間で何らかの方法でより速く移動することもできます。
一般的に、私は考え、考え、考えました。 これらの問題を解決するライブラリをご覧ください。
CleverScrollbar.js
これはスクロールバーの横にあるシンプルなサイドバーであり、ユーザーがナビゲーションするのに役立ちます。 名前が示すように、これはメインスクロールバーの代替ではありません。 それはかなり小さな追加です。
ストリップの上にマウスを移動すると、ページブロックの名前が展開されて表示されます。 ブロックをクリックすると、そこにリダイレクトされます。
設置
ライブラリをページにアップロードします
<script src="dist/clever-scrollbar.js"></script>
ES5、AMDなどからダウンロードすることもできます。
npm i clever-scrollbar
ページのメインコンテンツを含むブロックに追加の属性を追加します。
<body> <div class='head' data-content-block=" ">...</div> <div class='article-content' data-content-block=" ">...</div> <div class='comments' data-content-block=" ">...</div> </body>
すべてのコンテンツをロードした後、 CleverScrollbar.load()
コマンドを実行します！
window.addEventListener("load", function() { CleverScrollbar.load() })
それだけです。
追加のクラス
サイドバー要素の1つに追加をインストールする必要がある場合。 クラスでは、追加の属性を使用していつでもこれを行うことができます。
<div class='article-content' data-content-block="Article text" data-content-block-classes='main-content-block other-class' >...</div>
また、ライブラリ.cleverscroll--block-1
、 .cleverscroll--block-n
などのクラスが各ブロックに自動的に追加され、独自のスタイルを設定して各ブロックの外観を変更することもできます。
upd：現在アクティブなブロックにもcleverscroll--block-active
クラスcleverscroll--block-active
追加されました。
SPAおよびAjaxアプリケーション
サイトが動作中にコンテンツを動的に変更する場合は、 CleverScrollbar.reload()
メソッドを使用して、ライブラリがナビゲーションパネルも更新するようにします。
やめて
CleverScrollbar.stop()
コマンドを実行して、ライブラリをオフにします。 後で戻すこともできます。
それだけです。 これまでのところ、ライブラリは何をするかを知りません。
実装の詳細
ライブラリは、JSPMパッケージマネージャーとSystemJS非同期モジュールローダーに基づいて記述されています。また、インターネット上で独立したライブラリを構築および公開するための推奨事項を提供するJSPM 0.17 Betaチュートリアルに基づいています。
ライブラリには、jQueryのようなサードパーティの依存関係はありません。 縮小された形式のサイズは4kbかかります。 ソースコードは 、ES5のいくつかの機能を使用して記述されています。 他の人が必要に応じて問題なくコードを学習できるように、すべてを小さな独立したファイルに分割しようとしました。
また、最初にES5クラスを使用してライブラリの基本ロジックを記述したことも注目に値しますが、後にJSPMがクラスをサポートするためにBabelから最終ビルドにいくつかの追加機能を追加し、ライブラリサイズを10キロバイト増やしたことがわかりましたクラスの代わりに通常のnew function() { ... }
を使用するようにコードを書き直しました。 これも非常に正常に機能しますが、大きな違いはありません:)
おそらく、ライブラリはInternet Explorer 8-10などの古いブラウザーでは正しく動作しません-動作を確認していません。
また、ライブラリのスタイルは、 小さなjavascriptコードでブラウザにロードされることに注意してください。 利便性のためだけに、人々は手の動きを少なくします。 SystemJSローダーを使用してこれらのスタイルを読み込むこともできましたが、最終的なビルドのサイズは数キロバイト増加しますが、これはあまり望ましくありません。
実際に-ここに。 そのようなこと。 完了したようです。 もちろん、このトピックに関する他の人々の意見を知ることは私にとって興味深いでしょう:)そして、誰かがいくつかのサイトでどこで実装しているかを知ることはさらに面白いでしょう。