博客

jQuery滚动()方法

  • Post category:jquery

jQuery scroll()方法用于在滚动时触发事件。它可以用于检测页面滚动的位置，以便在需要时重新布局页面元素。

以下是scroll()方法的详细：

语法

$(window).scroll(function)

或

$(selector).scroll(function)

参数

  • function：必需，当滚动时要执行的函数。

示例1：检测页面滚动的位置

以下示例演示了如何使用scroll()检测页面滚动的位置：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery scroll() Method</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    #myDiv {
      height: 2000px;
      background-color: yellow;
      text-align: center;
      font-size: 24px;
      line-height: 200px;
    }
  </style>
</head>
<body>
  <div id="myDiv">Scroll down to see the effect</div>

  <script>
    $(window).scroll(function() {
      $('#myDiv').text('Scroll position: ' + $(window).scrollTop());
    });
  </script>
</body>
</html>

在上述示例中，我们使用scroll()方法检测页面滚动的位置，并在#myDiv元素中显示滚动位置。

示例2：检测元素滚动的位置

以下示例演示了如何使用scroll()方法检测元素滚动的位置：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery scroll() Method</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    #myDiv {
      height: 200px;
      overflow: auto;
      background-color: yellow;
      text-align: center;
      font-size: 24px;
      line-height: 200px;
    }
  </style>
</head>
<body>
  <div id="myDiv">
    <p>Scroll down to see the effect</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, sapien vel bibendum bibendum, sapien sapien bibendum sapien, vel bibendum sapien sapien bibendum sapien.</p>
    <p>Nulla facilisi. Sed euismod, sapien vel bibendum bibendum, sapien sapien bibendum sapien, vel bibendum sapien sapien bibendum sapien.</p>
    <p>Donec euismod, sapien vel bibendum bibendum, sapien sapien bibendum sapien, vel bibendum sapien sapien bibendum sapien.</p>
    <p>Etiam euismod, sapien vel bibendum bibendum, sapien sapien bibendum sapien, vel bibendum sapien sapien bibendum sapien.</p>
    <p>Quisque euismod, sapien vel bibendum bibendum, sapien sapien bibendum sapien, vel bibendum sapien sapien bibendum sapien.</p>
    <p>Aliquam euismod, sapien vel bibendum bibendum, sapien sapien bibendum sapien, vel bibendum sapien sapien bibendum sapien.</p>
    <p>Maecenas euismod, sapien vel bibendum bibendum, sapien sapien bibendum sapien, vel bibendum sapien sapien bibendum sapien.</p>
    <p>Curabitur euismod, sapien vel bibendum bibendum, sapien sapien bibendum sapien, vel bibendum sapien sapien bibendum sapien.</p>
    <p>Phasellus euismod, sapien vel bibendum bibendum, sapien sapien bibendum sapien, vel bibendum sapien sapien bibendum sapien.</p>
    <p>Integer euismod, sapien vel bibendum bibendum, sapien sapien bibendum sapien, vel bibendum sapien sapien bibendum sapien.</p>
  </div>

  <script>
    $('#myDiv').scroll(function() {
      $('#myDiv').text('Scroll position: ' + $(this).scrollTop());
    });
  </script>
</body>
</html>

在上述示例中，我们使用scroll()方法检测#myDiv元素的滚动位置，并在#myDiv元素中显示滚动位置。

注意事项

  • jQuery scroll()方法用于在滚动时触发事件。
  • 可以使用$(window).scroll()方法检测页面滚动的位置。
  • 可以使用$(selector).scroll()方法检测元素滚动的位置。
Tags: