我们有一个用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`