js无限滚动在不用任何框架的时候，用js实现一个无限滚动的功能 html部分限定元素高度，超过就隐藏 css部分 js部

在不用任何框架的时候，用js实现一个无限滚动的功能

html部分限定元素高度，超过就隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll to Load More</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="content">
        <!-- 初始内容 -->
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <!-- 更多内容将在接近底部时通过JavaScript加载 -->
    </div>
    <div class="loading" id="loading">Loading...</div>
    <script src="script.js"></script>
</body>
</html>

css部分

body, html {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  height: 100%;
}

.content {
  /* height: 400px;
  overflow: hidden;
  overflow-y: scroll; */
  padding: 20px;
}

.item {
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.loading {
  text-align: center;
  padding: 20px;
  display: none; /* 初始状态隐藏加载提示 */
  background-color: #f1f1f1;
  border-top: 1px solid #ddd;
}

js部分

// 判断是否滚动到底部附近的函数
function lowEnough() {
    var contentDiv = document.querySelector('.content');
    var contentHeight = contentDiv.scrollHeight; // 内容元素的总高度
    var scrollTop = contentDiv.scrollTop; // 内容元素的滚动位置
    var clientHeight = contentDiv.clientHeight; // 内容元素的可见高度（即容器的高度）
    var threshold = 20; // 接近底部的阈值

    // 如果滚动位置加上可见高度接近或等于内容总高度，则返回true
    return scrollTop + clientHeight >= contentHeight - threshold;
}

// 模拟加载更多内容的函数
function loadMoreContent() {
    var contentDiv = document.querySelector('.content');
    var loadingDiv = document.getElementById('loading');

    // 隐藏加载提示（如果之前显示的话）
    loadingDiv.style.display = 'block'; // 假设您想在加载前显示加载提示

    // 模拟异步加载内容（例如，从服务器获取数据）
    setTimeout(function() {
        // 创建新的内容项并添加到contentDiv中
        for (var i = 0; i < 5; i++) {
            var newItem = document.createElement('div');
            newItem.className = 'item';
            newItem.textContent = 'New Item ' + (contentDiv.children.length + 1 + i);
            contentDiv.appendChild(newItem);
        }

        // 隐藏加载提示
        loadingDiv.style.display = 'none';
    }, 500); // 模拟网络延迟
}

// 监听.content元素的滚动事件
var contentDiv = document.querySelector('.content');
contentDiv.addEventListener('scroll', function() {
    if (lowEnough()) {
        loadMoreContent();
    }
});

// 注意：这里没有使用window.load或DOMContentLoaded事件监听器，
// 因为我们关注的是.content元素的滚动，而不是整个页面的加载。