Javascript 检测用户滚动了多少
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11373741/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detecting by how much user has scrolled
提问by Sean Bone
I have an image pop-up ability on my website, in order to show users the full resolution picture when they click on a smaller version on the page.
我的网站上有一个图像弹出功能，以便在用户单击页面上的较小版本时向用户显示全分辨率图片。
This is the current CSSthat positions it:
这是CSS定位它的电流：
div#enlargedImgWrapper {
position: absolute;
top: 30px;
left: 55px;
z-index: 999;
}
The problem now is that if I click on an image further down the page, the window still appears in the top left corner of the page, where I can't see it until I scroll back up. I need it to appear relative to the window, whatever its current position relative to the document is.
现在的问题是，如果我单击页面下方的图像，该窗口仍会出现在页面的左上角，直到我向上滚动才能看到它。我需要它相对于窗口出现，无论它相对于文档的当前位置是什么。
Note:I don't want to use position: fixed;as some images might be taller than the screen, so I want users to be able to scroll along the image as well.
注意：我不想使用，position: fixed;因为有些图像可能比屏幕高，所以我希望用户也能够沿图像滚动。
My idea was to use JS to change the topvalue:
我的想法是使用 JS 来更改top值：
var scrollValue = ???;
document.getElementById('enlargedImgWrapper').style.top = scrollValue+30 + 'px';
How can I detect by how much the user has scrolled down the page (var scrollValue)?
Or is there a 'better' way to do this?
如何检测用户向下滚动页面的程度 ( var scrollValue)？
或者有没有“更好”的方法来做到这一点？
Edit:if possible I would like to do this without jQuery.
编辑：如果可能的话，我想在没有 jQuery 的情况下做到这一点。
回答by Engineer
Pure JavaScript uses scrollTopand scrollLeft:
纯 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
https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollTop
jQueryversion:
jQuery版本：
var scrollLeft = $(window).scrollLeft() ;
var scrollTop = $(window).scrollTop() ;
What you need is this:
你需要的是这个：
document.getElementById('enlargedImgWrapper').style.top = (scrollTop+30) + 'px';
回答by Raab
document.getElementById('enlargedImgWrapper').scrollTop;
MSDN
MSDN
This property's value equals the current vertical offset of the content within the scrollable range. Although you can set this property to any value, if you assign a value less than 0, the property is set to 0. If you assign a value greater than the maximum value, the property is set to the maximum value.
You can set this property inline, but the results might be inconsistent while the document is loading.
此属性的值等于可滚动范围内内容的当前垂直偏移。虽然您可以将此属性设置为任何值，但如果您指定的值小于 0，则该属性设置为 0。如果您指定的值大于最大值，则该属性设置为最大值。
您可以内联设置此属性，但在加载文档时结果可能不一致。
