1

我有一个input type=range滑块，它代表视频的进度条。此滑块被包裹在一个较小的容器内，因此当滑块上的拇指到达容器边缘时，容器向左滚动到足以使拇指再次可见。因此，我需要检测何时发生这种情况。我不能使用视频的 timeupdate 事件，因为它在单击滑块后也会触发，但在这种情况下容器不应该滚动。我也不能使用 jQueryUI 滑块，因为它不如 HTML 滑块精确...

我想我需要找到一种方法来检测拇指像素的实际位置。不幸的是，这是一个影子 DOM 元素......有没有办法用 javascript/jquery 获得它？

更新：这是 Chrome 呈现<input type=range>DOM 元素的方式，如开发人员工具中所示：

<input type="range">
  #shadow-root
    <div>  --> This is the slider container
      <div>  --> This is the slider track
        <div></div>  --> This is the slider thumb
      </div>
      <div style="visibility: hidden; position: static;"></div>
    </div>
</input>

我想要做的是检测滑块拇指 div 的位置（绝对或相对）而不寻找它的值。

4

1 回答 1

0

你可以显示一些我不完全理解你想要做什么的代码......

使用 jQuery 尝试像这样绑定阴影元素：

$(document).on('change', 'input[type="range"]', function(e) {
    var left = $('#imgId').position().left,
        rangePosition = $(this).val();
});
于 2013-02-08T12:10:05.650 回答