浏览器缩放改变 window.scrollTop/document.scrollTop 行为

Posted 2023-05-08

【中文标题】浏览器缩放改变 window.scrollTop/document.scrollTop 行为

【英文标题】：Browser Zoom changes window.scrollTop/ document.scrollTop behaviour

【发布时间】：2021-07-30 18:45:15

【问题描述】：

我正在尝试读取页面的当前 y 滚动以在用户滚动过去时淡入/淡出元素。

我从这个站点尝试了许多不同的解决方案，比如 .scrollTop、.pageYOffset、.scrollY 等，使用 $(window) 和 $(document)、$("element")，将其转换为百分比等等...

首先它们都可以正常工作，但是当我放大浏览器时，我得到的结果每次都会改变：

我有这个简单的页面设置

<div style="height: 800px"></div>
<h1 style="" id="test"> Test </h1>
<div style="height: 2000px"></div>

例如读取滚动位置：

$(window).scroll(function() 
console.log($(this).scrollTop());

当我向下滚动到我的标题并进入测试 T 上方时，它显示 830 像素。 但是当我放大（尝试过 chrome 和 firefox）时，首先我的控制台停止给出连续值并且似乎变得迟钝（？）并且去同一个地方（在 T 的正上方）返回一个不同的值（放大时更小) 取决于我的缩放比例，例如 500 像素。

是否有解决方案，或者是否有其他方法可以实现我想要做的事情？

附加信息

阅读更多内容后，我知道使用 Ctrl+/- 缩放（例如更改字体大小）和使用触摸板和 2 个手指进行缩放之间的区别。这也改变了我得到的结果，所以有时元素会在 window.scrollY 返回 800px 时出现，有时它会在显示 300px 时开始出现。我对此越来越感到困惑，也许有人可以在这里帮助我做基础；）

遇到了这个：Set precise scroll position when pinch-zoomed in 听起来有点像我正在经历的事情。

提前感谢您的任何见解！

【参考方案1】：

我的问题已过时。

阅读更多关于浏览器缩放与操作系统缩放、像素与像素密度等的信息后。

现在一切都说得通了。