javascript - 使用 jQuery/javascript 获取 slider 拇指绝对位置

Question

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

我想我需要找到一种方法来检测拇指像素的实际位置。不幸的是，这是一个影子 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>

我想做的是检测 slider 拇指 div 的位置(绝对或相对)而不查找其值。

Answer 1

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

使用 jQuery 尝试像这样绑定(bind)阴影元素:

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