This is related to the animation that occurs during the axes.setBy in scroll methods.
When the animation runs, an integer value is added to the scroll position based on the elapsed time, but this integer value is converted to a decimal value at scrollLeft, scrollTop when the browser's zoom changes.
You can check this link and this link that the scroll value is converted to a decimal value related to the browser's zoom.
As a result, the problem of mixing decimal values in the math causes the method to reach an incorrect destination.
My approach to this issue was as follows.
Even if you apply a math.ceil value to scrollLeft, the browser will convert it to a decimal value.
If you give axes.setBy a duration of 0, it will immediately move to that coordinates without animation.
The occurrence of animation by the scroll method can be detected by the animationEnd event of axes.
We can correct the scroll position using setBy when the animation is finished. This is only off by a few pixels, so it seems okay.
Correcting the value at this point will not fire unnecessary events such as finishScroll on the conveyer.
Animation caused by user input can be filtered out through the isTrusted value.
Issue
52
Details
https://codepen.io/malangfox/pen/bGOqJKE If you zoom in to 125% and press the NEXT button multiple times, it malfunctions at the end.
This is related to the animation that occurs during the
axes.setByin scroll methods.When the animation runs, an integer value is added to the scroll position based on the elapsed time, but this integer value is converted to a decimal value at
scrollLeft,scrollTopwhen the browser's zoom changes.You can check this link and this link that the scroll value is converted to a decimal value related to the browser's zoom.
As a result, the problem of mixing decimal values in the math causes the method to reach an incorrect destination.
My approach to this issue was as follows.
scrollLeft, the browser will convert it to a decimal value.axes.setBya duration of 0, it will immediately move to that coordinates without animation.animationEndevent of axes.setBywhen the animation is finished. This is only off by a few pixels, so it seems okay.finishScrollon the conveyer.isTrustedvalue.