使用jQuery獲取滑塊大拇指絕對位置/ javascript

我有一個input type=range滑塊，它表示視頻的進度條。此滑塊包裝在較小的容器內，以便當滑塊上的拇指到達容器的邊緣時，容器會向左滾動以使拇指再次可見。因此我需要檢測這種情況何時發生。我無法使用視頻的timeupdate事件，因爲它在點擊滑塊後也會觸發，但在這種情況下容器不應該滾動。我也不能使用jQueryUI滑塊，因爲它不如HTML的精確度...使用jQuery獲取滑塊大拇指絕對位置/ javascript

我想我需要找到一種方法來檢測拇指像素的實際位置。其中不幸的是一個陰影DOM元素...有沒有辦法讓它與JavaScript/jQuery的？

UPDATE：這是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>

我想要做的就是檢測位置時滑塊（絕對或相對）沒有看到它的價值。

來源

2013-02-08 goffreder

你爲什麼不能增加父容器的寬度？有沒有一些代碼？ – 2013-02-08 12:08:36

由於這種情況取決於您的實施，沒有人可以真正幫助您，除非您提供一些代碼。 – 2013-02-08 12:40:10

Mmh我可能很糟糕地解釋了自己（對不起，但我的英文不太完美^ _ ^），我沒有尋找解決方法，我試圖做的並不取決於我的實施。至少我不這麼認爲。無論如何，我會更新問題... – goffreder 2013-02-08 14:17:50

您可以顯示一些代碼，我不完全理解你正在試圖做什麼...

使用jQuery嘗試結合樣，影子元素：

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

來源

2013-02-08 12:10:05 soyuka

使用jQuery獲取滑塊大拇指絕對位置/ javascript

回答

相關問題