滚动定位在不同的缩放级别下表现不同[关闭]答案

【问题标题】：Scroll positioning behaves differently at different zoom levels [closed]滚动定位在不同的缩放级别下表现不同[关闭]
【发布时间】：2020-05-29 15:00:12
【问题描述】：

我有一个多列布局，其中右侧的列将更新为左侧列中所选项目的详细信息。

在Chrome中的110％及以下的缩放级别，右侧的列将滚动到顶部时，如下面的GIF中选择左侧的不同项目（这是所需的行为）。 p >

但是，在 125% 及以上的缩放级别下，当左侧的新项目被选中时，右侧列的滚动位置会保持不变（或者更糟的是，看起来滚动到顶部，然后又向下滚动）。

什么可能导致这种行为？我不知道如何调试这个问题。我尝试过处理几个元素的溢出，并查看了我们的样式以查找与滚动相关的内容，但到目前为止还不够。这种行为似乎不是 Chrome 特有的，因为我也可以在 Safari 中重现，但奇怪的是它发生在 Safari 中更高的缩放级别。

【问题讨论】：

您需要包含您的代码，而不仅仅是图片和 gif 文件
@Johannes 通常我会包含受影响的代码，但在这种情况下，部分问题是我不知道这里有什么相关的代码。有几百行旧模板代码嵌套在多个文件的几百行中。我的问题更笼统（也许我天真地认为有一个普遍的答案）：在没有明确的 js 代码导致滚动行为的情况下，还有什么其他的东西可以导致这种滚动行为，并导致它随着浏览器的变化而改变缩放变化。
您至少应该包含执行滚动的 (Javascript) 代码。例如，一个重要的细节是该代码是否滚动到一个绝对位置（即，一个固定的像素值，用于测量与顶部的距离）以及它如何获取该值，或者它是否滚动到一个锚点，或某种组合两者的
@Johannes 这就是让这个问题对我来说很神秘的部分原因：没有 no javascript 代码可以进行滚动。这个问题似乎与样式以及浏览器如何处理它们有关（不同平台和不同浏览器表现出相同的行为，但分辨率略有不同。
你坚持不显示代码：minimal reproducible example，拜托。话虽如此，我注意到自己将:root 或html 字体大小设置为 px 而不是 rem（反之亦然）可以在缩放浏览器窗口时产生这种效果。我的响应式字体的通用 CSS 代码是：html { font-size: calc(0.625vmin + 0.75rem) }。我从不（不是从不！！）更改:root font-size。

【解决方案1】：

您的问题可能是由于部分的高度在不同的缩放级别上有所不同。高度变化可能是由于缩放后部分宽度增加所致。

如果你当前的滚动是通过插件实现的，然后请以不同的缩放级别重新加载浏览器并检查问题是否仍然存在。因为，大多数插件将被配置为仅在页面重新加载时生效。

如果上述方法没有帮助，请分享您的代码 sn-p 或与此输出开发相关的任何其他信息

【讨论】：