在overflow:hidden中显示隐藏元素

Question

我有多个彼此相邻的步骤，其中一些由于

overflow:hidden

而被隐藏。我想展示这些隐藏的步骤来达到他们的目的。

示例从右到左：列后的数字被隐藏

5       4    |   3       2       1

到达步骤 4 时，应显示它，并应隐藏 1，反之亦然。

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
  }
}

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;
}

<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>

这是一个测试代码的小提琴：https://jsfiddle.net/2huemrny/1/

document.querySelector('.parent').scrollRight

不起作用。如何显示隐藏步骤？

Answer 1

一个简单的解决方案是使用“scrollIntoView”强制显示新的活动元素：

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

    //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');
    active.previousElementSibling.scrollIntoView();

    //Show previous steps
  }
}

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;
}

<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>