如何在 jQuery 中获取浏览器滚动位置

How do I get the browser scroll position in jQuery?

本文关键字:浏览器 滚动 位置 获取 jQuery      更新时间:2023-09-26

我有一个带有滚动的Web文档。 我想获取当前滚动位置的值(以像素为单位)。 当我运行下面的函数时,它返回值零。 我该怎么做?

<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript">
    $(function (){
        $('#Eframe').on("mousewheel", function() {
            alert(document.body.scrollDown)
        }
    })
</script>

既然你似乎正在使用jQuery,这里有一个jQuery解决方案。

$(function() {
    $('#Eframe').on("mousewheel", function() {
        alert($(document).scrollTop());
    });
});

这里没有太多要解释的。 如果你愿意,这里是jQuery文档。

最好使用$(window).scroll()而不是$('#Eframe').on("mousewheel")

如果用户使用滚动条上的向上和向下箭头手动滚动或抓取并拖动滚动条本身,则不会触发$('#Eframe').on("mousewheel")

$(window).scroll(function(){
    var scrollPos = $(document).scrollTop();
    console.log(scrollPos);
});

如果#Eframe是一个带有overflow:scroll的元素,并且您想要它的滚动位置。我认为这应该有效(不过我还没有测试过)。

$('#Eframe').scroll(function(){
    var scrollPos = $('#Eframe').scrollTop();
    console.log(scrollPos);
});

Pure JavaScript 可以做到!

var scrollTop = window.pageYOffset || document.documentElement.scrollTop;