Question

我正在尝试输出滚动位置，但我的解决方案似乎没有按预期工作。我做错了什么？

$(document).ready(function() {
    var tempScrollTop = $(window).scrollTop();
    function example() {
        console.log("Scroll from Top: " + tempScrollTop.toString());
    };
});

<body>      
    <p>some text</p>
    <!-- there are many <p> elements -->
    <p>some text</p>        
</body>

每当我向上或向下滚动时，脚本都不会在控制台上输出。

Answer 1

首先，你永远不会调用example()函数，因此它永远不会执行。您需要在所需元素的example()事件下调用scroll函数。其次，您需要更新函数内tempScrollTop变量的值。试试这个：

$(window).scroll(example);

function example() {
  var tempScrollTop = $(window).scrollTop();
  console.log("Scroll from Top: " + tempScrollTop.toString());
};

html, body {
  height: 2000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

您可以通过div元素内的Scroll检查 scrollTop 值，以显示div内容滚动的像素数

function myFunction() {
    var elmnt = document.getElementById("myDIV");
    var y = elmnt.scrollTop;
    document.getElementById ("demo").innerHTML = "Scrolled Top: " + y + "px";
}

#myDIV {
    height: 100px;
    width: 250px;
    overflow: auto;
}

#content {
    height: 800px;
    width: 200px;
    background-color: coral;
}

<p>Scroll inside the div element to display the number of pixels the content of div is scrolled top</p>

<div id="myDIV" onscroll="myFunction()">
  <div id="content">Scroll inside me!</div>
</div>

<p id="demo"></p>

在控制台

2 个答案: