我們有一個用javascript和css構建的圓形滑塊。我們需要滑塊來支持觸摸和鼠標事件。滑塊正確響應mousemove/touchmove事件。當使用Chrome瀏覽器縮放功能放大/縮小時，它仍然按照預期發揮作用，但當我們在其容器中添加和操作Zoom css屬性時，它開始變得很奇怪。使用縮放css屬性時，Javascript滑塊會改變行爲

工作滑塊：http://jsfiddle.net/sCanr/1/

要重現： 1）添加（式= 「變焦：0.5」），以該容器的標籤，所以這將是：

<div id='container' style="zoom:0.5"> 
<div id='slider'> </div> 
</div>

2）嘗試移動用鼠標處理程序。（touchmove事件產生類似的行爲）

注意：我們必須使用Zoom css屬性，因爲我們將滑塊插入由不同團隊維護的容器，該容器使用zoom屬性。

來源

2017-10-19 ambition10

告訴「不同的團隊」，他們不應該使用非標準['zoom']（https://developer.mozilla.org/ EN-US /文檔/網絡/ CSS /變焦）。 – Teemu

您可以簡單地使用jQuery roundSlider插件，問題已解決。也不需要在應用程序中處理大量的代碼。

檢查以下演示：

`DEMO`

來源

2018-03-09 15:15:00 Soundar

使用縮放css屬性時，Javascript滑塊會改變行爲

回答

DEMO

相關問題

`DEMO`