Home > Article > Web Front-end > How to use JavaScript to achieve the loading prompt effect of automatically loading when scrolling to the bottom of the page?

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

WBOYOriginal: 2023-10-18 11:43:411027browse

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();
  }
}

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>

In the above example, when the user scrolls to the bottom of the page, it will Add a new dc6dce4a544fdca2df29d5ac0ea9906b 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!

JavaScript ajax 事件

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use JavaScript to automatically load more content when scrolling to the bottom of a web page?Next article：How to use JavaScript to automatically load more content when scrolling to the bottom of a web page?

See more

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

Related articles