html - 滚动定位在不同缩放级别下表现不同

Question

我有一个多列布局，其中右侧的列将使用左侧列中选择的项目的详细信息进行更新。

在Chrome中的110％及以下的缩放水平下，右侧的列将滚动到顶部，当在下面的GIF中选择左侧的其他项目（这是所需的行为）。

However, at 125% zoom level and up, the scroll position of the column on the right is maintained when a new item on the left is selected (or worse, appears to scroll to the top, and then back down).

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

标签： htmlcsslayoutscrollresponsive-design

Answer 1

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

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

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