如何实现父容器#left-cnt滚动到底部时加载显示滚动元素？

嘿，我来帮你搞定这个父容器滚动加载的需求！要实现#left-cnt滚动到底部时加载新元素，咱们得先确保父容器具备滚动条件，再通过JS监听滚动事件判断触发时机。

第一步：给父容器设置滚动样式 #

首先，#left-cnt必须有固定高度（或最大高度）且开启垂直滚动，不然不会出现滚动条，也就没法监听滚动事件。你可以这样写CSS：

#left-cnt {
  max-height: 700px; /* 按需调整，比如用视口高度：height: 80vh; */
  overflow-y: auto;
  /* 可选：美化滚动条 */
  scrollbar-width: thin;
}

第二步：编写滚动监听逻辑 #

接下来用JavaScript监听#left-cnt的scroll事件，判断是否滚动到了底部，然后触发加载新元素的逻辑。这里加个防抖处理，避免滚动时频繁触发加载请求：

// 获取父容器元素
const leftContainer = document.getElementById('left-cnt');

// 防抖函数：避免滚动过程中频繁触发加载
function debounce(func, delay = 300) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, arguments), delay);
  };
}

// 判断是否滚动到底部的核心逻辑
function isScrollToBottom(container) {
  // scrollTop=已滚动距离；clientHeight=容器可见高度；scrollHeight=内容总高度
  return container.scrollTop + container.clientHeight >= container.scrollHeight - 10;
  // 减10是为了提前一点触发加载，提升用户体验，按需调整数值
}

// 加载新元素的业务逻辑（按需修改）
function loadMoreElements() {
  // 示例：生成新元素并追加到容器中
  const elementCount = document.querySelectorAll('.elements').length + 1;
  const newElement = document.createElement('div');
  newElement.className = 'elements scroll';
  newElement.textContent = `Element ${elementCount}`;
  leftContainer.appendChild(newElement);
}

// 给父容器绑定滚动监听
leftContainer.addEventListener('scroll', debounce(() => {
  if (isScrollToBottom(leftContainer)) {
    console.log('滚动到底部，开始加载新元素！');
    loadMoreElements();
  }
}));

关键细节说明 #

• scrollTop：容器内已滚动的垂直距离
• clientHeight：容器的可见高度（不含滚动条、边框）
• scrollHeight：容器内容的总高度（包括不可见的部分）
• 防抖函数：scroll事件会在滚动过程中高频触发，防抖能让函数在停止滚动后延迟执行，避免不必要的资源消耗

你可以直接把这些代码整合到项目里，根据实际需求调整容器高度、加载逻辑和防抖延迟~

内容的提问来源于stack exchange，提问作者alar