如何使输入类型=“范围”触发溢出滚动？

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。您可能需要微调以获得理想的效果。

另一种方法是检查该值是否大于某个值，然后将该框完全滚动到右侧。当它以其他方式返回时，请完全滚动到左侧。