javascript - 亚像素滚动问题,无法在 Chrome 69 上正确设置 scrollTop
问题描述
我正在尝试以scrollTop
编程方式设置某些 DOM 元素的属性,并且我有奇怪的行为会破坏我在某些特定环境中的测试。我创建了最小的复制(链接)
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上被破坏。它不是. 它可以在Mac上相同的Chrome版本上正常工作,甚至在 VirtualBox 下运行的Win 10 Home 上也能正常工作。Firefox和Edge也没有这样的问题。74.4000015258789
75
我知道它看起来很奇怪,但它会是什么?谁能确认这个问题?是否可以以某种方式修复它以确保scrollTop
分配的结果正是我想要的?
更新。感谢@khajjit,我能够在我的 Mac 机器上重现该问题,并进行了74.66666412353516
75% 的缩小和 150% 的放大。80% 给出75
、90% -- 74.44444274902344
、110% --74.54545593261719
等等(我更新了演示以显示结果表)。所以这个问题与操作系统无关。但它看起来像 Chrome 唯一的问题。Firefox 和 Edge 以任何规模返回 75。
更新 2。在 OS 层缩放屏幕分辨率也会影响这种情况。上面描述的 Win 10 Pro 就是这种情况;它有 125% 的操作系统扩展。
所以问题的实际部分是如何克服 Chrome 缩放舍入问题以便能够scrollTop
精确设置?
更新 3。Chromium Dev确认这是一个错误:
这个问题是因为 Chrome 不完全支持小数滚动偏移。
因此,如果有人对解决此问题感兴趣,请点击链接并在 Chromium 端为问题加注星标。
解决方案
我认为这可能与显示器的分辨率有关。
我的分辨率为 1920x1080,比例为 100%,结果为 75。
但如果设置为 75% 或 150%,结果将为 74.66666412353516。
或者说 25%,结果正好是 74。
关于它可能与什么有关,我没有任何确切的答案,但我认为这项小小的研究可能会导致正确的道路。
推荐阅读
- cqrs - 带有事件溯源的逻辑删除(可能带有敏感数据/GDPR)
- angular - 当我在输入字段中按回车键时,角度重定向
- javascript - Firebase 云函数错误:函数返回未定义、预期的 Promise 或值
- php - 无法使用 array_map 执行爆炸
- android - 对话框活动 - 自定义主题
- swift - 未找到匹配项:与输入中的谓词“”“IN 标识符”匹配的元素
- python - 如何将在一个 python 脚本中创建的元组用于另一个?
- python - 从另一个数据框创建数据框
- javascript - 如何获取表中一行的值?
- time-series - 使用自动编码器去噪引力波