如何在横向滚动的div列表中显示剩余元素数量？

核心思路 #

监听容器的滚动事件，通过元素位置判断统计可视区域右侧未完全显示的元素数量，实时更新计数文本。

完整代码实现 #

<div class="horizontal">
  <div class="item"> A </div>
  <div class="item"> B </div>
  <div class="item"> C </div>
  <div class="item"> D </div>
  <div class="item"> E </div>
  <div class="item"> F </div>
  <div class="item"> G </div>
  <div class="item"> H </div>
  <div class="item"> I </div>
  <div class="count"> 6 </div>
</div>

<style>
.horizontal {
  border: 3px solid #000;
  display: flex;
  gap: 0 10px;
  width: 200px;
  height: 100px;
  overflow-x: scroll;
  position: relative; /* 为count的绝对定位提供参考父级 */
}

.item {
  background-color: #f00;
  min-width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.count {
  position: absolute;
  background-color: #ffffff8a;
  width: 50px;
  left: 160px;
  height: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* 避免遮挡容器滚动操作 */
}
</style>

<script>
// 获取目标元素
const container = document.querySelector('.horizontal');
const items = Array.from(container.querySelectorAll('.item'));
const countEl = document.querySelector('.count');

// 计算并更新剩余元素数量
function updateRemainingCount() {
  const containerRight = container.getBoundingClientRect().right;
  let remaining = 0;

  items.forEach(item => {
    // 元素左边界超出容器右边界，判定为完全未显示
    if (item.getBoundingClientRect().left > containerRight) {
      remaining++;
    }
  });

  countEl.textContent = remaining;
}

// 页面加载时初始化计数
updateRemainingCount();
// 监听滚动事件实时更新
container.addEventListener('scroll', updateRemainingCount);
</script>

关键细节说明 #

• 给.horizontal添加position: relative，确保计数框的绝对定位基于滚动容器
• 使用getBoundingClientRect()获取元素与可视区域的相对位置，精准判断元素是否完全在可视区域外
• 给.count设置pointer-events: none，避免计数框干扰容器的滚动操作

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