Wie kann ich mit JavaScript den Ladeaufforderungseffekt erzielen, der beim Scrollen zum Ende der Seite automatisch geladen wird?-js-Tutorial-php.cn

Wie kann ich mit JavaScript den Ladeaufforderungseffekt erzielen, der beim Scrollen zum Ende der Seite automatisch geladen wird?

WBOY

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

Original

1150 Leute haben es durchsucht

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

JavaScript Wie implementiert man den Ladeaufforderungseffekt beim Scrollen zum Ende der Seite?

Unendliches Scrollen ist eine sehr beliebte Funktion in der modernen Webentwicklung. Wenn der Benutzer zum Ende der Seite scrollt, werden automatisch weitere Inhalte geladen, ohne dass er auf Schaltflächen oder Links klicken muss. Dieses dynamische Laden sorgt für ein besseres Benutzererlebnis und ermöglicht Benutzern das nahtlose Durchsuchen von mehr Inhalten. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript den Ladeaufforderungseffekt erzielen, der beim Scrollen zum Ende der Seite automatisch geladen wird.

Um den automatischen Ladeeffekt beim Scrollen zum Ende der Seite zu erzielen, müssen wir das Fenster-Scroll-Ereignis abhören. Wenn Sie zum Ende der Seite scrollen, lösen Sie die Logik aus, um neuen Inhalt zu laden.

Zuerst können wir das Ereignis window.onscroll verwenden, um auf das Scrollen des Fensters zu warten. Dieses Ereignis wird immer dann ausgelöst, wenn das Fenster gescrollt wird. Wir können Logik in den Ereignishandler schreiben, um festzustellen, ob die Seite nach unten gescrollt wurde. window.onscroll 事件监听窗口的滚动。每当窗口滚动时，该事件会被触发。我们可以在该事件的处理函数中编写逻辑，以判断是否滚动到了页面底部。

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

Nach dem Login kopieren

在上述代码中，我们使用了 document.documentElement.offsetHeight 获取当前文档的高度，使用 window.innerHeight 获取窗口的可视高度，使用 document.documentElement.scrollTop || document.body.scrollTop 获取滚动条的位置。通过判断滚动条的位置和窗口的可视高度是否等于文档的高度，我们可以判断是否滚动到了页面底部。

当滚动到页面底部时，可以在 loadMoreContent 函数中编写加载新内容的逻辑。例如，可以通过 Ajax 请求从服务器获取更多的数据，并将数据添加到页面上。

以下是一个简单的示例，演示如何使用 JavaScript 实现滚动到页面底部自动加载的加载提示效果：

<!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>

Nach dem Login kopieren

在上述示例中，当用户滚动到页面底部时，会在页面上添加一个新的 <div>rrreee

Im obigen Code verwenden wir document.documentElement.offsetHeight, um die Höhe des aktuellen Dokuments zu ermitteln, und window.innerHeight, um die visuelle Höhe des Fensters zu ermitteln , und verwenden Sie document.documentElement.scrollTop || document.body.scrollTop Ruft die Position der Bildlaufleiste ab. Indem wir beurteilen, ob die Position der Bildlaufleiste und die sichtbare Höhe des Fensters mit der Höhe des Dokuments übereinstimmen, können wir beurteilen, ob der Bildlauf den unteren Rand der Seite erreicht hat.

Wenn Sie zum Ende der Seite scrollen, können Sie die Logik zum Laden neuer Inhalte in die Funktion loadMoreContent schreiben. Sie können beispielsweise eine Ajax-Anfrage stellen, um mehr Daten vom Server abzurufen und die Daten der Seite hinzuzufügen. 🎜🎜Das Folgende ist ein einfaches Beispiel, das zeigt, wie Sie mithilfe von JavaScript den Ladeaufforderungseffekt des automatischen Ladens implementieren, wenn Sie zum Ende der Seite scrollen: 🎜rrreee🎜Im obigen Beispiel, wenn der Benutzer zum Ende der Seite scrollt , wird der Seite ein neues <div>-Element hinzugefügt, das anzeigt, dass mehr Inhalt geladen wird. 🎜🎜Mit dem obigen Codebeispiel können wir den Ladeaufforderungseffekt erzielen, dass beim Scrollen zum Ende der Seite automatisch geladen wird. Natürlich variiert die konkrete Implementierung je nach den Anforderungen des Projekts und Sie können sie entsprechend Ihren eigenen Anforderungen ändern und erweitern. Ich hoffe, dieser Artikel hilft Ihnen zu verstehen, wie Sie mit JavaScript den Ladeaufforderungseffekt erzielen, der beim Scrollen zum Ende der Seite automatisch geladen wird. 🎜

Das obige ist der detaillierte Inhalt vonWie kann ich mit JavaScript den Ladeaufforderungseffekt erzielen, der beim Scrollen zum Ende der Seite automatisch geladen wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!