如何在jQuery中獲取瀏覽器滾動位置？

Question

我有一個帶滾動的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>

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);
});

如果#Eframe是一個帶overflow:scroll的元素overflow:scroll它，你想要它的滾動位置。 我認為這應該有效（我還沒有測試過）。

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

Answer 3

純javascript可以做到！

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