如何使輸入類型=「範圍」觸發溢出滾動？

Question

我有一個輸入類型=「範圍」是大於其父。我想在滑塊縮略圖退出父寬度時使其滾動。

這是一個例子，當你超過父寬度時，應該有一個滾動。我怎樣才能做到這一點？

http://jsbin.com/ikemo4/edit

請注意，輸入類型= 「範圍」 將只能在WebKit的瀏覽器。

Answer 1

的非常簡單的選擇是使用oninput事件和，假設你的值和寬度由小提琴，被準確地表示當的範圍內增大超過所述容器的寬度的值通過操縱scrollLeft rangeValue - parentWidth。我在你的jsBin例如使用下面的代碼來實現這一點：

var rng = document.getElementById("range"); 

rng.oninput = function() { 
    this.parentNode.scrollLeft = this.value - 400; 
} 

而且結果可以被全世界展示here。您可能需要微調以獲得理想的效果。

另一種方法是檢查該值是否大於某個值，然後將該框完全滾動到右側。當它以其他方式返回時，請完全滾動到左側。