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

Question

我的输入类型=“范围”比其父级大。我想在滑块拇指退出父宽度时滚动它。

这是一个例子，当你超过父宽度时，应该有一个滚动。我怎么能这样做？

http://jsbin.com/ikemo4/edit

请注意，input type =“range”仅适用于WebKit浏览器。

Answer 1

非常简单的选项是使用 oninput 事件，假设您的值和宽度由小提琴准确表示，当范围的值增加超过容器的宽度时，操纵< em> scrollLeft by rangeValue - parentWidth 。我使用以下代码在您的jsBin示例中实现了这一点：

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

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

结果可以演示here。您可能需要稍微调整一下以获得所需的效果。

另一种选择是检查该值是否大于某个数量，并将该框完全滚动到右侧。当它以另一种方式返回时，完全向左滚动。