亚像素滚动问题,无法在 Chrome 69 上正确设置scrollTop

2024-01-20

我正在尝试设置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.6666641235351675% 缩小和 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 端给该问题加注星标。


我认为这可能与显示器的分辨率有关。
我的分辨率为 1920x1080,比例为 100%,结果为 75。
但如果设置 75% 或 150%,结果将为 74.66666412353516。
或者说 25%,结果正好是 74。


对于它可能与什么相关,我没有任何确切的答案,但我认为这项小研究可能会带来正确的道路。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

亚像素滚动问题,无法在 Chrome 69 上正确设置scrollTop 的相关文章

  • 设置 location.hash 时防止默认行为

    当我这样做时 location hash test url 会更新 页面会定位到具有该 id 的元素 有没有办法阻止页面定位到该元素 Solution 您无法阻止这种行为 但您可以通过暂时隐藏目标来愚弄它 例如 像这样 与 jQuery 无
  • 不使用 PHP 提交联系表单

    我还是一名学生 今天我们的讲师告诉我们 无需使用 mailto 函数即可提交联系我们表单的唯一方法是使用 PHP 我发誓去年另一位讲师向我们展示了一种仅使用 javascript 的方法 是否可以使用基本表单和 javascript 提交反
  • 当标题中包含“&”时,电子邮件标题无法正确显示,如何在 JavaScript 中修复?

    我有一些代码以以下格式显示文章标题列表 简短描述和作者姓名 标题 作者姓名 描述 作者的姓名和描述与此处无关 因为它们始终显示正确 大多数标题也可以正确显示 以下是一些虚构的示例 关于银行业务您需要了解的最重要的一件事 作者姓名 正确显示
  • Excel 宏与 Javascript

    我希望使用 Javascript 中的宏而不是默认的 VBA 来操作 Excel 电子表格 我可以使用以下 VBA 代码执行 javascript 代码 javascript to execute Dim b As String b fun
  • 以编程方式在指令内添加指令

    我想将指令的另一个实例附加到父指令中 但我无法使用 apply 重新编译我的指令 我想我在某个地方错过了一些东西 我的 HTML 代码 div div div div
  • 将事件添加到 Google Maps API InfoWindow 内的元素

    我想在 Google Maps API v3 InfoWindow 内放置一个带有输入字段和提交按钮的表单 提交后 我想调用一个函数 该函数使用输入字段中输入的地址启动方向服务 这是我的代码 我目前只测试方向事件是否被触发 我已经编写了完整
  • 从 html5

    我正在寻找一种方法来根据用户代理字符串将控件属性添加到视频标签 我不希望在 iPad 和 Android 之外的任何浏览器或设备上出现控件属性 所以我认为用户代理是最好的识别方法 因为 ipad 和 android 一词出现在各自的 UA
  • 创建 html 结构,每个 li 中仅允许 3 个 div 元素。在 React + underscore.js 中

    这是以下内容的位副本如何创建每个 li 中仅允许 3 个 div 元素的 html 结构 在 React underscore js 中 https stackoverflow com questions 38008023 how to c
  • 在 JQuery ui 自动完成中显示图像

    我有一个带有 JQuery ui 自动完成功能的脚本 可以完美运行 有一个显示用户名字和姓氏的搜索过程 但在我的数据库中 还有用户的图片 我想将其显示在带有名字和姓氏的建议中 数据库中pic包含图片url 剧本 function searc
  • 如何使用javascript从word文档页面中删除表格设计? Word js 插件

    我正在从表格 html 的 word 文档最后一页插入表格设计 我怎样才能删除它 这是我的代码 async function NewMap try await Word run async context gt html to word h
  • 在 Chrome 中加载analytics.js时出现307重定向

    我正在构建一个网络应用程序并使用 Google Analytics analytics js 进行分析 我最近注意到 Chrome 中的分析功能无法正常工作 我使用单独模块中的标准代码片段加载分析并通过 requirejs 包含 我已验证该
  • 我们如何使用 thymeleaf 绑定对象列表的列表

    我有一个表单 用户可以在其中添加任意数量的内容表对象这也可以包含他想要的列对象 就像在 SQL 中构建表一样 我尝试了下面的代码 但没有任何效果 并且当我尝试绑定两个列表时 表单不再出现 控制器 ModelAttribute page pu
  • iPhone 点击时使 div 变暗

    当您的 div 附加了点击处理程序时 当点击该 div 时 iPhone 会使该 div 变暗 作为点击指示器 示例 在移动 Safari 上查看http jsbin com awejo3 4 http jsbin com awejo3 4
  • 模拟节点外部模块默认使用 jest 的链式方法

    在我们的节点 CLI 中 我们有一个简单的方法 use strict const ora require ora module exports function startSpinner textOnStart color spinnerT
  • Socket.io 与服务器离线连接

    如何检测服务器是否离线或由于其他原因无法连接 我的代码看起来像这样 this socket io connect connectionInfo reconnect false 它不会抛出任何错误 因此 try catch 子句不起作用 Us
  • 在React组件中使用的字符串变量中插入html

    我正在为我的投资组合网站构建一个反应应用程序 目前我已经用 JSX 编写了应用程序 因此我可以添加以下内容 class Project extends React Component render return div h1 this pr
  • 有没有办法从画布上清除一个元素而不消除其他元素?

    我正在使用画布构建页面加载器 并使用 es6 类 虽然目前我无法使其正常工作 原因之一是我找不到清除画布的方法进展 到目前为止 这是我的代码 class Loader constructor width height this width
  • 网络音频 API:查找、播放/缓冲进度

    当您使用 Chrome 中的音频元素播放音频时 您会听到烦人的咔嗒声和破裂声 至少在我的 64 位 Linux 安装下 即使在我格式化并安装了新的 Fedora 版本之后也是如此 Firefox 和 Opera 都可以 甚至 Virtual
  • 角度 4 单击按钮功能未触发

    我正在尝试检查文本输入是否为空或不在角度 4 中 我没有为此使用表单 这只是一个输入字段 当我在下面的按钮中执行 addLocaton 函数时 需要进行检查 我的输入字段
  • JavaScript 中“键”的类型是什么?

    当我失去焦点并开始思考一个愚蠢的问题时 我遇到了这样的时刻 var a b value b 的类型是什么 我的意思不是 值 的类型 而是标记为 b 的实际键 背景 当我必须创建一个字符串键时 我开始想知道这一点 var a b value

随机推荐

  • 如何在 Android 模拟器中模拟总网络丢失

    我正在尝试编写一个应用程序 需要知道何时没有可用的 IP 网络连接 我正在使用 android net conn CONNECTIVITY CHANGE 广播事件以及 ConnectivityManager 对状态变化做出反应以实现此目的
  • 如何根据文本过滤 VS Code 中的问题?

    我在 Windows 10 x64 上使用 VS Code 1 41 0 在我的代码 使用您可能从未听说过的研究语言 中 我在 问题 面板中收到很多特定类别的警告消息 我想忽略这些消息 消息的文本在不同实例中略有不同 但始终包含 重复 一词
  • 寻找一种非 LL(1) 的语言?

    我最近一直在研究很多非 LL 1 的语法 其中许多可以转换为 LL 1 的语法 然而 我从未见过这样的例子明确的语言这不是 LL 1 换句话说 一种语言的任何明确语法都不是 LL 1 我也不知道如果我不小心偶然发现了一种语言 我将如何证明我
  • Python 中 open 和 codecs.open 的区别

    在 Python 中打开文本文件有两种方法 f open filename And import codecs f codecs open filename encoding utf 8 When is codecs open优于open
  • 如何获取 Firestore 文档大小?

    From Firestore 文档 https firebase google com docs firestore quotas 我们得到Firestore 文档的最大大小 is 文档的最大尺寸1 MiB 1 048 576 字节 QUE
  • Polarion ALM 工具 [关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 我们正在公司寻找完整的 ALM 解决方案 我们正在研究 Polarion ALM 和 RTC 有人听说过 Polarion 完整的 ALM 工具吗 如
  • 将 SVN 提交发送到 RSS 源

    所以我最喜欢的网络工具 Subtlety http subtlety errtheblog com 最近已停止使用 这意味着我无法再轻松访问我关注的各种 SVN 项目的提交日志 是否有任何其他工具可以轻松地为公共 SVN 存储库生成 RSS
  • 在 Flutter 中实现视频源的最佳方式是什么?

    我正在 flutter 中构建一个应用程序 其中包含类似 TikTok 中的视频源 您可以想象一个 ListView 您可以在其中滚动浏览一些视频 5 25 秒 这些视频存储在 Google Cloud Platform 中 目前 包含超过
  • 无符号整数差异的意外结果

    我很惊讶这个函数为 dif1 和 dif2 产生不同的值 void test unsigned int x 0 y 1 long long dif1 x y long long dif2 int x y printf dif lld lld
  • 如何关闭 Intellij IDEA 中的自动括号生成?

    当输入函数名称 或自动完成 时 IDEA 会自动在其后面添加括号并将光标放在它们之间 富 我非常不喜欢这个 并且更希望它让我自己输入括号 有什么办法可以做到这一点吗 Update 回复 插入配对支架 设置 所以 这个选项对我来说已经关闭了
  • Graphics CopyFromScreen 方法如何复制位图?

    private void startBot Click object sender EventArgs e Bitmap bmpScreenshot Screenshot this BackgroundImage bmpScreenshot
  • AVSpeechSynthesizer isSpeaking 在 Swift 中不起作用

    因此 更新到 Xcode 12 0 1 后 AVSpeechSynthesizer 现在可以在模拟器上运行 它已经有一段时间没有为我工作了 现在 无论合成器是否正在说话 isSpeaking 变量始终为 false 我想根据合成器是否在说话
  • 如果位置不是美国,则使用 Amazon Mechanical Turk?

    亚马逊土耳其机器人 https www mturk com mturk welcome是一个大规模微外包 API 您可以在其中以相对便宜的价格 例如每张图像 0 10 U 完成大量简单的小任务 例如 此图像中是否有商店 亚马逊似乎认为这项服
  • 使用数据增强层在 Tensorflow 2.7.0 上保存模型

    尝试使用 Tensorflow 版本 2 7 0 保存具有数据增强层的模型时出现错误 这是数据增强的代码 input shape rgb img height img width 3 data augmentation rgb tf ker
  • 带 Spring JMS 和不带 Spring JMS 的 AUTO_ACKNOWLEDGMENT 模式之间的区别

    我试图了解 JMS 中的确认模式如何工作 我正在阅读这个来源 它让我非常困惑 因为它与 Spring 的文档所说的相矛盾 消息人士说一件事 从http www javaworld com article 2074123 java web d
  • firebase部署错误,错误:无法列出(项目名称)的功能

    我在 Firebase 中托管我的 Web 应用程序 并使用 Gitlab CI CD 部署它 并且它一直工作得很好 但今天由于某种原因我在管道工作时收到此错误 56Error Failed to list functions for pr
  • 为什么将 /textbackslash{} 插入到 knitr Rmd 图形中的 .tex 中?

    我有一个结果部分 其中包括代码块和文本 当我将 Rmd 编 织成 pdf 时 我的两个人物周围都有 LaTeX 代码 字幕未正确呈现 查看我的 Results tex 文件 我可以看到我有几个 textbackslash 插入图中的LaTe
  • 如何从父元素获取文本并从子元素中排除文本 (C# Selenium)

    在 Selenium 中是否可以仅从父元素而不是其子元素获取文本 例子 假设我有以下代码 div class div www google com id google gt Google Link span class helpText T
  • Java 中是否为未使用的字段分配内存?

    我想知道Java中的内存分配是如何工作的 我有一个class Duck有两个实例变量int size and String name 这些变量被初始化 如果我没有实例化此类 这些变量的内存是否会在运行时在堆上分配 谢谢 基因 几种可能的情况
  • 亚像素滚动问题,无法在 Chrome 69 上正确设置scrollTop

    我正在尝试设置scrollTop以编程方式获取某些 DOM 元素的属性 并且我有奇怪的行为 破坏了我在某些特定环境中的测试 我创建了最小的重现 the link https jsfiddle net dhilt mo4zveka 25 HT