javascript - 如何让输入类型="range"触发溢出滚动？

Question

我有一个输入 type="range"大于其父级。我想让它在 slider 拇指退出父宽度时滚动。

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

http://jsbin.com/ikemo4/edit

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

Answer 1

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

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

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

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

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