web-dev-qa-db-ja.com

divでカスタムスクロールバーを作成する方法（Facebookスタイル）

Facebookのカスタムスクロールバーがどのように作成されたのか不思議です。

それはcssまたはjavascriptだけですか？

はいの場合、コードがどのように見えるかを知ることができますか？

この質問はFacebookスクロールバースタイルに固有のものであり、単にカスタムスクロールバーを使用する方法ではありません

javascripthtmlcssscrollbar
42
Jerome Ansia

このリンク で開始できます。要するに、スクロールバーのように見えるようにスタイルが設定されたdivは、クリックアンドドラッグイベントをキャッチするために使用されます。これらのイベントには、任意の高さに設定され、通常はoverflow：scrollのcssルールを持つ別のdivのコンテンツをスクロールするメソッドが接続されています（cssルールにはバリエーションがありますが、アイデアは得られます）。

私はすべて学習体験についてです-しかし、それがどのように機能するかを学んだ後、私はそれを行うためにライブラリ（その多くがあります）を使用することをお勧めします。それはそれらの「再発明しない」ものの一つです...

48
Daniel Szabo

Facebookは、スクロールバープラグインjsFancyScrollのコンテキストで説明した非常に巧妙な手法を使用しています。

スクロールされたコンテンツは、実際にはブラウザーのスクロールメカニズムによってネイティブにスクロールされますが、ネイティブスクロールバーはオーバーフロー定義を使用して非表示にされ、カスタムスクロールバーは双方向イベントリスニングによって同期されます。

あなたのプロジェクトに私のプラグインを自由に使用してください：:)

https://github.com/leoselig/jsFancyScroll/

ひどいパフォーマンスの問題が発生するTinyScrollbarなどのプラグインよりもお勧めします！

12
Leo Selig

Facebookのようなスクロールバーを探しているなら、これを見てみることを強くお勧めします。

http://rocha.la/jQuery-slimScroll

11
Mahdi

スクロールするコンテンツdivに兄弟として別のdivを追加することで、この問題を解決しました。高さは、曲線の境界の半径に設定されます。一番下にナッジしたいコンテンツがある場合や、この新しいdivに流し込みたいテキストがある場合など、設計上の問題が発生します。しかし、私のUIでは、この細いdivは問題ありません。

本当のトリックは、次の構造を持つことです。

<div class="window">
 <div class="title">Some title text</div>
 <div class="content">Main content area</div>
 <div class="footer"></div>
</div>

重要なCSSハイライト：

  • CSSは、スクロールバーを表示できるように、高さとオーバーフローでコンテンツ領域を定義します。
  • ウィンドウクラスは、タイトルとフッターと同じ直径の角を取得します
  • 必要に応じて、ドロップシャドウはウィンドウクラスにのみ与えられます
  • フッターdivの高さは、下隅の半径と同じです

これは次のようなものです。

Bottom right corner

4
DaChew