How to use JavaScript to achieve the loading prompt effect of automatically loading when scrolling to the bottom of the page?-JS Tutorial-php.cn

How to use JavaScript to achieve the loading prompt effect of automatically loading when scrolling to the bottom of the page?

WBOY

Release： 2023-10-18 11:43:41

Original

1097 people have browsed it

JavaScript 如何实现滚动到页面底部自动加载的加载提示效果？

JavaScript How to achieve the loading prompt effect of automatically loading when scrolling to the bottom of the page?

Infinite scrolling is a very popular feature in modern web development. When the user scrolls to the bottom of the page, more content automatically loads without having to click buttons or links. This dynamic loading provides a better user experience, allowing users to browse more content seamlessly. This article will introduce how to use JavaScript to achieve the loading prompt effect of automatically loading when scrolling to the bottom of the page.

To achieve the automatic loading effect of scrolling to the bottom of the page, we need to listen to the window scroll event. When scrolling to the bottom of the page, trigger the logic to load new content.

First, we can use the window.onscroll event to listen for the scrolling of the window. This event is fired whenever the window is scrolled. We can write logic in the handler function of this event to determine whether the page has been scrolled to the bottom.

window.onscroll = function() {
  // 获取当前文档的高度
  var documentHeight = document.documentElement.offsetHeight;

  // 获取窗口的可视高度
  var windowHeight = window.innerHeight;

  // 获取滚动条的位置
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

  // 判断是否滚动到了页面底部
  if (scrollTop + windowHeight === documentHeight) {
    // 触发加载新内容的逻辑
    loadMoreContent();
  }
}

Copy after login

In the above code, we use document.documentElement.offsetHeight to get the height of the current document, use window.innerHeight to get the visual height of the window, use document.documentElement.scrollTop || document.body.scrollTop Get the position of the scroll bar. By judging whether the position of the scroll bar and the visible height of the window are equal to the height of the document, we can judge whether the scroll has reached the bottom of the page.

When scrolling to the bottom of the page, you can write the logic to load new content in the loadMoreContent function. For example, you can make an Ajax request to get more data from the server and add the data to the page.

The following is a simple example that demonstrates how to use JavaScript to achieve the loading prompt effect of automatic loading when scrolling to the bottom of the page:

<!DOCTYPE html>
<html>
<head>
  <title>无限滚动加载示例</title>
  <script>
    window.onscroll = function() {
      var documentHeight = document.documentElement.offsetHeight;
      var windowHeight = window.innerHeight;
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

      if (scrollTop + windowHeight === documentHeight) {
        loadMoreContent();
      }
    }

    function loadMoreContent() {
      // 模拟从服务器获取新数据的过程，延时1秒钟
      setTimeout(function() {
        var content = document.createElement('div');
        content.innerText = '加载更多的内容...';
        document.body.appendChild(content);
      }, 1000);
    }
  </script>
</head>
<body>
  <h1>示例页面</h1>
  <div>
    <p>这里是初始内容...</p>
  </div>
</body>
</html>

Copy after login

In the above example, when the user scrolls to the bottom of the page, it will Add a new <div> element to the page to indicate loading more content.

Through the above code example, we can achieve the loading prompt effect of scrolling to the bottom of the page and loading automatically. Of course, the specific implementation will vary according to the needs of the project, and you can change and extend it according to your own needs. I hope this article will help you understand how to use JavaScript to achieve the loading prompt effect of automatically loading when scrolling to the bottom of the page.

The above is the detailed content of How to use JavaScript to achieve the loading prompt effect of automatically loading when scrolling to the bottom of the page?. For more information, please follow other related articles on the PHP Chinese website!