为什么这个滑块拖动的时候会闪

Question

/------------------js部分------------------------- /

问题是为什么鼠标拖拽滑块的时候，滑块会闪动，求大神指点

案例代码：https://jsfiddle.net/bbux0h7v/2/

Answer 1

把offsetY改成pageY就行了。关于offsetY的意思，规范是这么写的：The MouseEvent.offsetY read-only property provides the offset in the Y coordinate of the mouse pointer between that event and the padding edge of the target node.关于pageY的意思：The MouseEvent.pageY read-only property returns the vertical coordinate of the event relative to the whole document.你体会一下这两者的区别，然后再想想为什么offsetY不行。最后，个人觉得你的js代码写的有点乱……我稍微改了改，你可以参考下：$(document).ready(function(){&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;axiL&nbsp;=&nbsp;0, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;doc&nbsp;=&nbsp;$(document), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b&nbsp;=&nbsp;$("#b");&nbsp;&nbsp;&nbsp;&nbsp;//定义鼠标拖动时执行的函数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;move(event){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;top&nbsp;=&nbsp;parseInt(b.css("top"));&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;axiN&nbsp;=&nbsp;top&nbsp;+&nbsp;event.pageY&nbsp;-&nbsp;axiL; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;axiN&nbsp;=&nbsp;(axiN&nbsp;<&nbsp;0)&nbsp;?&nbsp;0:&nbsp;axiN; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;axiN&nbsp;=&nbsp;(axiN&nbsp;>&nbsp;170)&nbsp;?&nbsp;170:&nbsp;axiN; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b.css("top",&nbsp;axiN); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;axiL&nbsp;=&nbsp;event.pageY; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;b.on("mousedown",&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;doc.on("mousemove",&nbsp;move); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;axiL&nbsp;=&nbsp;event.pageY; &nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;doc.on("mouseup",&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;doc.off("mousemove",&nbsp;move); &nbsp;&nbsp;&nbsp;&nbsp;}); });