我正在尝试以编程方式设置某些 DOM 元素的 scrollTop
属性,但我有一些奇怪的行为会破坏我在某些特定环境中的测试。我创建了最小的复制品(the link)
HTML
<div id=viewport><div id=content></div></div>
CSS
#viewport {
overflow-y: auto;
height: 20px;
}
#content {
height: 150px;
}
JS
const viewport = document.getElementById("viewport");
viewport.scrollTop = 75;
console.log(viewport.scrollTop);
在 Win 10 Pro 上运行的 Chrome 69.0.3497.100 脚本的结果是错误的。它是 74.4000015258789
而不是 75
。它可以在 Mac 上的相同 Chrome 版本上正常运行,甚至可以在 VirtualBox 下运行的 Win 10 Home 上正常运行。 Firefox 和 Edge 也没有这样的问题。
我知道它看起来很奇怪,但它会是什么呢?任何人都可以确认这个问题吗?是否可以通过某种方式修复它以确保 scrollTop
赋值的结果正是我想要的?
更新。感谢@khajjit,我能够在我的 Mac 机器上重现该问题并在 75% 缩小和 150% 放大时得到 74.66666412353516
。80% 给出 75
、90 % -- 74.44444274902344
,110% -- 74.54545593261719
等(我更新了 the demo 以显示结果表)。所以这个问题与操作系统无关。但它看起来像 Chrome 唯一的问题。 Firefox 和 Edge 在任何规模下都返回 75。
更新 2。在 OS 层缩放屏幕分辨率也会影响这种情况。上述 Win 10 Pro 就是这种情况;它有 125% 的操作系统扩展。
所以问题的实际部分是如何克服 Chrome 缩放舍入问题以便能够精确设置 scrollTop
?
更新 3。 Chrome 开发 confirmed that this is a bug :
This issue is because Chrome does not fully support fractional scroll offset.
所以如果有人有兴趣解决这个问题,请关注the link并在 Chromium 端为问题加注星标。
最佳答案
我觉得可能跟显示器的分辨率有关。
我的分辨率为 1920x1080,比例为 100%,结果为 75。
但是,如果您设置 75% 或 150%,结果将是 74.66666412353516。
或者说 25%,结果正好是 74。
对于它可能与什么有关,我没有任何确切的答案,但我认为这个小小的研究可能会引向正确的道路。
关于javascript - 亚像素滚动问题,无法在 Chrome 69 上正确设置 scrollTop,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52470549/