如何使input type=“range”触发溢出滚动?

最简单的选择是使用 输入端 事件,并且,假设您的值和宽度由小提琴精确表示,当范围值增加到容器宽度之后,操纵 向左滚动 通过 RangeValue-父级宽度 . 我在JSbin示例中使用以下代码实现了这一点:

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

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

结果可以演示 here . 你可能想稍微调整一下以获得想要的效果。

另一个选项是检查该值是否大于某个值,并将该框完全向右滚动。当它返回到另一个方向时,完全向左滚动。