【发布时间】:2019-02-27 10:43:28
【问题描述】:
我正在尝试以编程方式设置某些 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。铬开发confirmed that this is a bug:
这个问题是因为 Chrome 不完全支持小数滚动 偏移量。
因此,如果有人对解决此问题感兴趣,请关注 the link 并在 Chromium 端为该问题加注星标。
【问题讨论】:
-
我在 windows10 上运行了 75 个 .chrome 版本 69.0.3497.100(官方构建)(64 位)
标签: javascript google-chrome scroll zooming scrolltop