检测用户滚动了多少

Question

我的网站上有一个图像弹出功能,以便在用户点击页面上的较小版本时向用户显示完整的分辨率图片.

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

Answer 1

纯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';

Answer 2

document.getElementById('enlargedImgWrapper').scrollTop;

MSDN

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

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

scrollTop属性