如何获得jQuery中浏览器的滚动位置?


73

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

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

您想获得用户滚动的像素数量吗?只是他们第一次滚动?对吗
Manse 2012年

Answers:


118

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

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

这里没有太多解释。如果需要,这里是jQuery文档


3
这一直给我0
Pomster 2014年

@Pomster是的。您是否找到解决方案?
r3wt 2014年

3
@Pomster @ r3wt您必须确保将功能设置为滚动的任何文档对象。因此,如果滚动在某个位置<div id="foo">...,语法将是$("#foo").scrollTop()
史蒂文·曼

27

最好使用$(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);
});

10

纯JavaScript可以做到!

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

1
就我而言,这scrollTop让我在页面刷新后由浏览器完成滚动,这正是我想要的
Hassan Tareq
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.