我正在尝试设置scrollTop
以编程方式获取某些 DOM 元素的属性,并且我有奇怪的行为,破坏了我在某些特定环境中的测试。我创建了最小的重现(the link https://jsfiddle.net/dhilt/mo4zveka/25/)
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);
脚本的结果被破坏了铬69.0.3497.100运行于赢 10 专业版. It is 74.4000015258789
代替75
。它可以在同一台机器上正常工作Chrome版本于Mac甚至于Win 10Home 在 VirtualBox 下运行。Firefox and Edge也没有这样的问题。
我知道这看起来很奇怪,但那会是什么?谁能确认这个问题吗?能否以某种方式修复它以确保结果scrollTop
作业正是我想要的吗?
Update。感谢@khajjit,我能够在我的 Mac 机器上重现该问题并得到74.66666412353516
75% 缩小和 150% 放大。80% 给出75
, 90%——74.44444274902344
, 110% --74.54545593261719
等(我更新了the demo https://jsfiddle.net/dhilt/mo4zveka/25/显示结果表)。所以这个问题与操作系统无关。但看起来这只是 Chrome 的问题。 Firefox 和 Edge 在任何规模下都返回 75。
Update 2。在操作系统层缩放屏幕分辨率也会影响这种情况。上面描述的Win 10 Pro就是这种情况;它的操作系统扩展率为 125%。
所以问题的实际部分是如何克服 Chrome 缩放舍入问题以便能够设置scrollTop
恰恰?
Update 3。铬开发确认这是一个错误 https://bugs.chromium.org/p/chromium/issues/detail?id=890345#c6:
这个问题是因为 Chrome 不完全支持分数滚动
抵消。
因此,如果有人对解决这个问题感兴趣,请关注the link https://bugs.chromium.org/p/chromium/issues/detail?id=890345并在 Chromium 端给该问题加注星标。