자바 스크립트 및 CSS로 작성된 원형 슬라이더가 있습니다. 터치 및 마우스 이벤트를 지원하는 슬라이더가 필요합니다. 슬라이더가 mousemove/touchmove 이벤트에 올바르게 응답합니다. Chrome 확대/축소 기능을 사용하여 확대/축소 할 때 예상대로 작동하지만 해당 컨테이너 내에서 확대/축소 CSS 속성을 추가하고 조작하면 이상하게 작동합니다.줌 CSS 속성을 사용할 때 자바 스크립트 슬라이더의 동작이 바뀝니다.

근무 슬라이더 : http://jsfiddle.net/sCanr/1/

재현하려면 : 1) 추가 (스타일 = "줌 : 0.5") 컨테이너 태그, 그래서는 다음과 같습니다

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

2)를 이동하려고 핸들러. (touchmove 이벤트는 비슷한 동작을 생성합니다)

참고 : zoom 속성을 사용하는 다른 팀에서 유지 관리하는 컨테이너에 슬라이더를 삽입하기 때문에 Zoom CSS 속성을 사용해야합니다.

출처

2017-10-19 ambition10

은 https://developer.mozilla.org/ ([zoom''] 비 표준을 사용하지 않도록은 "다른 팀"에게 en-US/docs/Web/CSS/zoom). – Teemu

jQuery roundSlider 플러그인을 사용하여 문제가 해결 된 곳이면 간단하게 사용할 수 있습니다. 또한 응용 프로그램에서 많은 코드를 처리 할 필요가 없습니다.

확인 아래 데모 :

`DEMO`

출처

2018-03-09 15:15:00 Soundar

줌 CSS 속성을 사용할 때 자바 스크립트 슬라이더의 동작이 바뀝니다.

답변

DEMO

관련 문제

`DEMO`