42

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

这是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 的情况下这样做。

4

3 回答 3

73

纯 JavaScript 使用scrollTopand 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';
于 2012-07-07T09:29:09.827 回答
5 
document.getElementById('enlargedImgWrapper').scrollTop;

MDN

此属性的值等于可滚动范围内内容的当前垂直偏移量。虽然您可以将此属性设置为任何值，但如果您分配的值小于 0，则该属性设置为 0。如果您分配的值大于最大值，则该属性设置为最大值。

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

scrollTop 属性

于 2012-07-07T09:24:33.903 回答
-1

试试看

console.log('Current Scroll (X/Y)', window.pageXOffset, window.pageYOffset);

你可以在这里找到从水平和垂直到顶部的滚动量。

这是有关滚动的完整文档： https ://javascript.info/size-and-scroll-window

于 2022-03-03T10:32:25.157 回答