如何获取用户向下滚动页面的像素数？答案

【问题标题】：How to get the number of pixels a user has scrolled down the page?如何获取用户向下滚动页面的像素数？
【发布时间】：2011-05-04 02:57:14
【问题描述】：

假设我们有一个高度很大的html页面。所以会有一个垂直滚动条。

当用户向下滚动时，我想知道他使用 javascript (jquery) 滚动了多少……这可能吗？

【问题讨论】：

标签： javascript jquery scrollbar

【解决方案1】：

是的。请参阅 jQuery 中的 scrollTop()，它包装了 scrollTop DOM 属性。

【讨论】：

【解决方案2】：

您可以使用.scroll() 和.scrollTop() 执行此操作。

 $(window).scroll(function() {
     // use the value from $(window).scrollTop(); 
 });

另见question。

【讨论】：

【解决方案3】：

这是我在我的网站上使用的...当有人向下滚动 620 像素时，菜单会弹出，我手动输入数字。我仍然是 javascript 的菜鸟，但我希望这会有所帮助

    <script>
    $(document).ready(function(){
        $(window).scroll(function(){
            var scrollTop = 620;
            if($(window).scrollTop() >= scrollTop){
                $('.Nav').css({
                    position : 'fixed',
                    top : '0'
                });
            }
            if($(window).scrollTop() < scrollTop){
                $('.Nav').removeAttr('style');  
            }
        })
    })
    </script>

【讨论】：

虽然这可行，但可以改进，不需要第二个 if 语句，只需使用 else。如果还有其他内联样式（可能是另一个 js 函数），那么仅仅删除 'style' 属性可能会很危险。我认为更好的做法是反转您在初始 if 中添加的样式

【解决方案4】：

在纯 JavaScript 中，您可以简单地这样做：

window.onscroll = function (e) {
    console.log(window.scrollY); // Value of scroll Y in px
};

更多信息（Mozilla 开发者网络）：

【讨论】：

我很惊讶没有人对此表示赞同。 +1 来自我 ;)
您是否需要像使用 removeEventListener 一样在退出前取消注册？
哇！！！伙计，你在 2020 年救了我！！！非常感谢！！！！你是明星！！

【解决方案5】：

您可以使用 window.scrollX 来检测用户向右滚动了多少像素。
您可以使用 window.scrollY 来检测用户向下滚动了多少像素。
您可以使用 window.scrollTo(x, y); 设置向右 (x) 和向下 (y) 滚动像素。

示例代码：

var x = window.scrollX, y = window.scrollY;
window.scrollTo(0, 200);

【讨论】：