多滚动div页面加载时定位到指定位置问题求助

问题根源 #

你遇到的核心问题是HTML元素ID重复：所有目标滚动元素都使用了id="current"，但HTML规范要求ID必须全局唯一。这导致：

• 第一种写法中document.querySelector('#current')只会匹配DOM中第一个该ID的元素，因此只有第一个div生效
• 第二种写法中虽然用了scrollable.querySelector('#current')，但浏览器对重复ID的处理行为不可预测，最终仅最后一个div生效

解决方案 #

1. 将目标元素的唯一ID改为类名（例如class="current"），避免全局ID冲突
2. 确保每个可滚动div拥有唯一ID（用于存储各自的超时定时器，避免冲突）
3. 修改滚动定位逻辑，针对每个可滚动容器内部查找目标元素

修正后的完整代码 #

HTML结构示例 #

<div class="scrollable" id="scrollable-1">
  <div class="item">内容1</div>
  <!-- 更多内容 -->
  <div class="item current">目标元素1</div>
  <!-- 更多内容 -->
</div>

<div class="scrollable" id="scrollable-2">
  <div class="item">内容2</div>
  <!-- 更多内容 -->
  <div class="item current">目标元素2</div>
  <!-- 更多内容 -->
</div>

<div class="scrollable" id="scrollable-3">
  <div class="item">内容3</div>
  <!-- 更多内容 -->
  <div class="item current">目标元素3</div>
  <!-- 更多内容 -->
</div>

JavaScript代码 #

document.addEventListener("DOMContentLoaded", () => {
  const scrollables = document.querySelectorAll('.scrollable');
  const timeouts = {};

  // 针对指定可滚动容器，滚动到内部的目标元素
  function resetScrollPosition(scrollable) {
    // 在当前容器内查找class为current的目标元素
    const targetItem = scrollable.querySelector('.current');
    if (targetItem) {
      targetItem.scrollIntoView({ 
        behavior: "smooth", 
        block: "center", 
        inline: "nearest" 
      });
    }
  }

  // 为每个可滚动容器添加滚动超时重置监听
  scrollables.forEach(scrollable => {
    scrollable.addEventListener('scroll', () => {
      clearTimeout(timeouts[scrollable.id]);
      timeouts[scrollable.id] = setTimeout(() => {
        resetScrollPosition(scrollable);
      }, 5000);
    });

    // 页面加载完成后立即执行一次定位
    resetScrollPosition(scrollable);
  });
});

关键修改说明 #

• 用class="current"替代id="current"，确保每个可滚动容器内的目标元素可以被正确查找
• 使用scrollable.querySelector('.current')替代全局选择器，精准定位当前容器内的目标元素
• 为每个.scrollable元素添加唯一ID，保证timeouts对象的键不重复，避免定时器冲突
• 保留了原有的滚动超时重置逻辑，确保用户停止滚动后自动回到目标位置

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