Question

我有一个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的位置（绝对或相对），而不查找其值。

Answer 1

你可以展示一些我不完全明白你要做的事情的代码......

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

$(document).on('change', 'input[type="range"]', function(e) {
    var left = $('#imgId').position().left,
        rangePosition = $(this).val();
});

使用jQuery / javascript获取滑块拇指绝对位置

1 个答案: