检测用户滚动的次数

我的网站上有一个图像弹出功能，当用户点击页面上的较小版本时，为了向用户显示全分辨率图片，检测用户滚动的次数

这是当前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。

来源

2012-07-07 Sean Bone

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

来源

2012-07-07 09:29:09 Engineer

非常感谢你这个伟大的答案！它完美的工作！ – 2012-07-07 09:35:35

document.getElementById('enlargedImgWrapper').scrollTop;

MSDN

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

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

scrollTop property

来源

2012-07-07 09:24:33 Rab

谢谢你的回答！你能解释这行代码吗？ – 2012-07-07 09:25:39

看到这个链接https://developer.mozilla.org/en/DOM/element.scrollTop – Rab 2012-07-07 09:28:50

和这个http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx – Rab 2012-07-07 09:30:37

检测用户滚动的次数

回答

相关问题