如何創建自定義滾動條來垂直滾動文檔？

-1

我在這裏想法不多了。我正在嘗試使側滾動條來控制整個文檔的幻燈片。正如你可以在我的Jsfiddle上看到的一樣，我一直在嘗試，但無法讓它工作。這是標記和CSS。您可以在底部的鏈接中看到更精細的版本。歡迎任何幫助。如何創建自定義滾動條來垂直滾動文檔？

HTML

<div id="sidescroll"> 
    <div id="sidescrollbtn"></div> 
</div>

CSS

#sidescroll{height:80px;width:10px;background:grey;border:1px solid black;margin:0 auto;} 
#sidescrollbtn{height:10px;width:10px;background:red;margin-top:10px;}

http://jsfiddle.net/vinicius5581/33fx6dpr/

來源

2014-09-19 Vinicius Santana

試驗： http://jsfiddle.net/vinicius5581/2y63xnxa/5/ – 2014-09-19 23:06:10

你不想爲此使用css？只是一個JavaScript？將'overflow-y：scroll'添加到要滾動的div的CSS樣式中。 Adn不要忘記高度屬性。 – andrex 2014-09-19 23:13:36

@andrex你認爲'overflow-y：scroll'能使'＃sidescroll'工作嗎？請觀看小提琴。 – 2014-09-19 23:15:46

這裏有一個更新的小提琴，解決了幾個從評論的問題。

首先，這裏的小提琴鏈接：http://jsfiddle.net/dLbbntwz/

一個我想做的一件事是清理代碼，並從之前降低個別up/down事件處理程序的重複。相反，我有一個功能_scroller，然後將1/-1傳遞給實際的_scroll邏輯。

此外，添加了鼠標滾輪邏輯的演示。所以現在它會同步！

正如您所提到的那樣，如果您單擊並將光標從按鈕上移開，就會出現一個醜陋的錯誤。這是由於間隔未被清除。我在另一條評論中提到你可以設置一個標誌並檢查文檔級別（允許用戶將光標從按鈕上移開 - 這對MouseEvents來說感覺更「正確」）。我已經更新了小提琴使用該邏輯。感覺好多了？

另外，percentualOffset還有一個小問題。雖然它正確地計算了比例，但它沒有考慮到滾動條的高度（導致滾動條比條更遠）。我更新了這個，所以它更準確。

調整按鈕的大小也存在一個小問題。如果文檔高度大於文檔滾動高度（無滾動條），事情就會破裂。所以，這個邏輯也被清理了。

你提到你想要10px總是（爲背景圖片） - 我添加了填充來解決這個問題（我推薦） - 它在計算按鈕的偏移量時簡化了邏輯。

希望這有助於！我看到你可以探索的另一個領域是能夠點擊並拖動滾動按鈕來滾動實際頁面 - 這將是光滑的！

來源

2014-09-22 07:48:08 Jack

這是一個可變滾動速度的小提琴：http://jsfiddle.net/dLbbntwz/5/這將是較長的頁面，你可能不想要一個恆定的速度很好。 – Jack 2014-09-22 08:34:26

如何創建自定義滾動條來垂直滾動文檔？

回答

相關問題