如何在div（Facebook風格）上創建自定義滾動條

Question

我很想知道Facebook上的自定義滾動條是如何製作的。

它只是CSS或一些JavaScript以及？

如果是，我可以對代碼的外觀有所瞭解嗎？

這個問題是針對Facebook的滾動條的風格，而不是如何簡單擁有一個自定義的滾動條

Answer 1

This link應該讓你開始的組合。長話短說，一個被設計成看起來像一個滾動條的div被用來捕捉點擊和拖動事件。連接到這些事件的方法是滾動被設置爲任意高度的另一個div的內容，並且通常具有溢出的css規則：scroll（在css規則中存在變體，但你明白了）。

我完全瞭解學習體驗 - 但是在瞭解了它的工作原理之後，我建議使用一個庫（其中有很多）來完成它。它的那些「不徹底改造」的事情之一......

編輯 如果你想跳過學習階段共，jassi9911發佈了link的jQuery插件，已經死了，簡單易用。好東西。

Answer 2

它的JavaScript和CSS

http://jscrollpane.kelvinluck.com/basic.html

Answer 3

如果你正在尋找一個像Facebook的滾動條，那麼我強烈建議你看看這個例子：

http://rocha.la/jQuery-slimScroll

Answer 4

我通過添加另一個DIV作爲同級解決了這個問題滾動內容div。它的高度設置爲彎曲邊框的半徑。如果你有想要推到最底部的內容，或者你想要流入這個新的div的文本等等，那麼會出現設計問題。但對於我的用戶界面來說，這個薄的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將定義內容區域，其高度和溢出，允許滾動條（S）出現。
• 窗口類得到相同的直徑角部作爲標題和頁腳
• 的陰影，如果需要的話，只給窗口類
• 頁腳div的高度是相同的半徑底角

這裏是一個樣子：

Answer 5

Facebook的使用我在上下文中描述一個非常聰明的技術我的滾動條插件jsFancyScroll：

滾動的內容實際上由瀏覽器滾動機制滾動，而本地滾動條通過使用溢出定義隱藏，並且自定義滾動條通過雙向事件監聽保持同步。

隨意使用我的插件爲您的項目：:)

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

我強烈推薦它了插件，如TinyScrollbar來與可怕的性能問題！