解决overflow:hidden容器内隐藏步骤的滚动显示问题

我有多个并排的步骤元素，部分因设置overflow:hidden被隐藏，希望切换到隐藏步骤时将其显示。示例（从右到左排列）：竖线右侧数字隐藏：

5       4    |   3       2       1

切换到步骤4时显示它并隐藏步骤1，反之亦然。现有代码如下，但document.querySelector('.parent').scrollRight = 1000不生效，请问如何实现隐藏步骤的显示？

原代码 #

HTML #

<div class="parent">
    <span class="child active">1</span>
    <span class="child">2</span>
    <span class="child">3</span>
    <span class="child">4</span>
    <span class="child">5</span>
</div>
<button id="next" class="next">Next</button>
<button id="back" class="back">Back</button>

CSS #

body{
    direction: rtl;
}

.parent{
    overflow: hidden;
    white-space: nowrap;
    background: black;
    padding: 10px;
}

.child{
    display: inline-block;
    height: 20px;
    width: 300px;
    background: grey;
    margin-left: 20px;
    text-align: center;
}

.active{
    background: red;
}

.next{
    display: block;
    margin: 10px auto;
    background: #ccc;
    padding: 10px 20px;
}

.back{
    display: block;
    margin: 10px auto;
    background: #eee;
    padding: 10px 20px;
}

JavaScript #

window.onload = function(){
  document.getElementById('next').onclick = function(){
    var active = document.querySelector('.active');
    active.classList.remove('active');
    active.nextElementSibling.classList.add('active');

    //Show next steps
    if(document.querySelector('.active').getBoundingClientRect().right < 0){
      document.querySelector('.parent').scrollRight = 1000;
    }
  }

  document.getElementById('back').onclick = function(){
    var active = document.querySelector('.active');
    active.classList.remove('active');
    active.previousElementSibling.classList.add('active');

    //Show previous steps
  }
}

问题原因 #

在direction: rtl（从右到左）的布局容器中，scrollRight的行为与默认LTR布局相反，手动设置固定滚动值不仅不灵活，还无法适配元素的实际位置。同时原代码的可视区域判断逻辑也未适配RTL布局的位置计算规则，导致滚动触发条件不准确。

解决方案 #

使用浏览器原生的scrollIntoViewAPI替代手动设置滚动值，它会自动适配RTL布局，将目标元素滚动到可视区域，同时添加越界判断避免报错：

window.onload = function(){
  const parent = document.querySelector('.parent');
  
  document.getElementById('next').onclick = function(){
    const active = document.querySelector('.active');
    const nextEl = active.nextElementSibling;
    if(!nextEl) return; // 防止超出最后一步时报错
    
    active.classList.remove('active');
    nextEl.classList.add('active');
    
    // 将激活元素滚动到可视区域，可自定义滚动行为
    nextEl.scrollIntoView({
      behavior: 'auto', // 可选'smooth'实现平滑滚动
      block: 'nearest',
      inline: 'center' // 让元素在容器中居中显示，也可设为'start'/'end'
    });
  }

  document.getElementById('back').onclick = function(){
    const active = document.querySelector('.active');
    const prevEl = active.previousElementSibling;
    if(!prevEl) return; // 防止回到第一步时继续点击报错
    
    active.classList.remove('active');
    prevEl.classList.add('active');
    
    prevEl.scrollIntoView({
      behavior: 'auto',
      block: 'nearest',
      inline: 'center'
    });
  }
}

补充说明 #

• scrollIntoView无需手动计算滚动距离，自动适配布局方向，兼容性好且逻辑简洁。
• 越界判断可以避免用户重复点击按钮导致的DOM操作报错。
• 调整behavior和inline参数可自定义滚动效果，满足不同的视觉需求。

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