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

Question

我有一个带有滚动条的网络文档。我想获取当前滚动位置的值（以像素为单位）。当我运行以下函数时，它返回值为零。我怎样才能做到这一点？

<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>

Answer 1

由于您似乎正在使用 jQuery，因此这是一个 jQuery 解决方案。

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

这里不多解释。如果你愿意，这里是jQuery 文档。

Answer 2

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

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

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

If#Eframe是一个带有它的元素，overflow:scroll并且您想要它的滚动位置。我认为这应该可行（虽然我还没有测试过）。

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

Answer 3

纯javascript就可以做到！

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