jQuery判断div随滚动条滚动到一定位置后停止

首先，我们需要了解一下jQuery中获取窗口滚动条位置的方法scrollTop()，它可以返回文档被卷起来的高度。

接下来，我们可以通过绑定窗口的scroll事件，来动态监听窗口的滚动事件，并在滚动到一定位置后停止对div的滚动事件进行监听。

以下是完整的代码实现：

$(window).scroll(function() {
  var scrollTop = $(this).scrollTop();  // 获取滚动条位置
  var stopScroll = 200;  // 设置停止滚动的位置

  // 判断div是否到达停止滚动的位置
  if(scrollTop > stopScroll) {
    // 如果到达位置，解绑滚动事件
    $('div').unbind('scroll');
  }
});

在上面的代码中，我们将滚动停止的位置设置为200，当滚动条高度大于200时，就会停止对div的滚动事件进行监听。

接下来，我们可以再看一个实际的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <title>停止div滚动事件监听</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <style>
    #scrollDiv {
      height: 500px;
      width: 500px;
      border: 1px solid #ccc;
      overflow: auto;
    }
  </style>
</head>

<body>
  <div id="scrollDiv">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae neque laoreet, lobortis leo in, euismod arcu. Nullam dapibus id dolor sit amet fermentum. Fusce commodo dolor id diam imperdiet tincidunt. Pellentesque malesuada nunc ligula, a laoreet purus cursus non. Aliquam rhoncus mauris odio, nec vulputate erat efficitur eget. Nunc commodo, quam in ultrices eleifend, sapien eros tempor lorem, sit amet laoreet tellus libero eu ante. Vestibulum eget massa quis eros tempus dapibus vel nec odio. Integer mollis volutpat magna sed pulvinar. Curabitur nec rutrum neque. Donec a sapien ante. Mauris facilisis, sapien sit amet pulvinar imperdiet, elit ex fringilla justo, ut elementum orci velit sit amet purus. Praesent convallis, tortor id ultricies fermentum, sapien nisi vulputate ligula, eu condimentum risus purus sit amet nisl.</p>
    <p>Morbi usa fauciabu haq tophat livsmedelstillsatser, iaculis sed turpis sed ubmollis rutrum. Vestibulum purus diam, maximus at enim quis, sodales eleifend metus. Pellentesque pretium est nec neque vestibulum, a faucibus tortor elementum. Sed quis enim quis sapien varius feugiat eu ut ante. Etiam ac orci eu ex rhoncus malesuada eu nec nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi ac facilisis odio, non auctor tellus. Curabitur aliquam, leo vel lobortis volutpat, orci erat laoreet purus, vitae faucibus mauris lacus at nunc. Vestibulum vehicula congue nisl in posuere. Nunc euismod, elit sed bibendum tempor, sapien velit rhoncus neque, id luctus tellus velit bibendum ex. Sed in pellentesque enim, vel viverra dolor. Aliquam erat massa, accumsan ut congue nec, tempus ut sapien. Proin rhoncus fringilla augue et hendrerit.</p>
  </div>

  <script>
    $('#scrollDiv').scroll(function() {
      var scrollTop = $(this).scrollTop();  // 获取滚动条位置
      var stopScroll = 200;  // 设置停止滚动的位置

      // 判断div是否到达停止滚动的位置
      if(scrollTop > stopScroll) {
        // 如果到达位置，解绑滚动事件
        $(this).unbind('scroll');
      }
    });
  </script>
</body>
</html>

在上面的代码中，我们创建了一个滚动条可以滚动的div，并动态监听滚动事件，当滚动条高度大于200时，停止对该div的滚动事件进行监听。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery判断div随滚动条滚动到一定位置后停止 - Python技术站

jQuery判断div随滚动条滚动到一定位置后停止

相关文章