📌  相关文章
📜  关于滚动调用函数 jquery - Javascript (1)

📅  最后修改于: 2023-12-03 15:22:33.896000             🧑  作者: Mango

关于滚动调用函数

在前端开发过程中，我们经常需要针对页面滚动进行一些操作，比如隐藏导航栏、加载更多内容等等。而滚动事件是一个非常常见的事件，可以通过 jQuery 的方法来监听滚动事件并调用函数。

监听滚动事件

监听滚动事件可以使用 $(window).scroll() 方法，该方法会在滚动条滚动时触发一个事件。比如我们可以通过以下代码来监听滚动事件：

$(window).scroll(function() {
  // code here
});
滚动事件参数

在上述示例中，我们可以看到我们调用的函数并没有任何参数，但是实际上滚动事件会传递一个事件对象，我们可以通过该事件对象获取到一些滚动相关的信息，比如滚动条的位置。代码如下：

$(window).scroll(function(event) {
  console.log(event); // 输出事件对象
  console.log($(window).scrollTop()); // 输出滚动条距离顶部的距离
});
节流与防抖

监听滚动事件时，由于浏览器的性能限制，事件可能会被频繁触发，而造成性能问题。为了解决这个问题，我们可以使用节流（throttle）或防抖（debounce）的方法来限制事件的触发次数。

// 节流方法
function throttle(fn, delay) {
  let lastTime = 0;
  return function() {
    const now = Date.now();
    if (now - lastTime > delay) {
      fn.apply(this, arguments);
      lastTime = now;
    }
  }
}

// 防抖方法
function debounce(fn, delay) {
  let timer = null;
  return function() {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  }
}

$(window).scroll(throttle(function() {
  // code here
}, 1000));
示例代码

以下是一个示例代码，当滚动条距离顶部超过 100px 时，页面中间的提示框会弹出一些提示信息：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Scroll Event Demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      height: 2000px;
    }

    .message {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #ccc;
      padding: 20px;
      border-radius: 5px;
    }
  </style>
</head>

<body>
  <div class="message" style="display: none;">Hello!</div>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $(window).scroll(function() {
      if ($(window).scrollTop() > 100) {
        $('.message').fadeIn();
      } else {
        $('.message').fadeOut();
      }
    });
  </script>
</body>

</html>

以上代码中，当滚动条距离顶部超过 100px 时，提示框会逐渐地弹出；当滚动条距离顶部小于等于 100px 时，提示框会逐渐地消失。