通过用户滚动量进行检测

Detecting by how much user has scrolled

本文关键字：检测 滚动 用户      更新时间：2023-09-26

我的网站上有一个图像弹出功能，当用户点击页面上的较小版本时，可以向他们显示全分辨率的图片。

这是当前定位它的CSS：

div#enlargedImgWrapper {
    position: absolute;
    top: 30px;
    left: 55px;
    z-index: 999;
}

现在的问题是，如果我点击页面下方的图像，窗口仍然出现在页面的左上角，在我向上滚动之前我看不到它。我需要它相对于窗口出现，无论它相对于文档的当前位置是什么

注意：我不想使用position: fixed;，因为有些图像可能比屏幕高，所以我希望用户也能沿着图像滚动。

我的想法是使用JS来更改top值：

var scrollValue = ???;
document.getElementById('enlargedImgWrapper').style.top = scrollValue+30 + 'px';

如何通过用户向下滚动页面的程度来检测（var scrollValue）
或者有更好的方法吗？

编辑：如果可能的话，我想在没有jQuery的情况下执行此操作。

纯JavaScript使用scrollTop和scrollLeft:

var scrollLeft = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;

https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollTop

jQuery版本：

var scrollLeft = $(window).scrollLeft() ;
var scrollTop = $(window).scrollTop() ;

你需要的是：

document.getElementById('enlargedImgWrapper').style.top = (scrollTop+30) + 'px';

document.getElementById('enlargedImgWrapper').scrollTop;

MDN

此属性的值等于可滚动范围内的内容。尽管您可以设置属性分配给任何值，如果分配的值小于0，则该属性设置为0。如果指定的值大于最大值属性设置为最大值。

您可以内联设置此属性，但结果可能是加载文档时不一致。

scrollTop属性

相关文章：