如何在单个按钮单击中应用多个div中的水平滚动？

Question

我有10个div块，其中水平滚动是单独的。我想要实现的是创建一个按钮，单击所有10 div将水平滚动到某个限制。

这里是js代码，我试图解决这个问题。我正在使用开关盒来确定点击了哪个按钮。在这个我点击右键，所以案件权将执行和其中的代码。

case 'right':
    if (count == inspectionData.length-1) {
        alert('No More Data');
        return;
    }
    this.setState({
        count:count+2
    },()=>{
        var elmnt = document.getElementById("diva"+count);
        elmnt.scrollIntoView();
        var elmnt1 = document.getElementById("divb"+count);
        elmnt1.scrollIntoView();
        var elmnt2 = document.getElementById("divc"+count);
        elmnt2.scrollIntoView();
        var elmnt3 = document.getElementById("divd"+count);
        elmnt3.scrollIntoView();
        var elmnt4 = document.getElementById("dive"+count);
        elmnt4.scrollIntoView();
        var elmnt5 = document.getElementById("divf"+count);
        elmnt5.scrollIntoView();
        var elmnt6 = document.getElementById("divg"+count);
        elmnt6.scrollIntoView();
        var elmnt7 = document.getElementById("divh"+count);
        elmnt7.scrollIntoView();
        var elmnt8 = document.getElementById("divi"+count);
        elmnt8.scrollIntoView();
        var elmnt9 = document.getElementById("divj"+count);
        elmnt9.scrollIntoView();
        var elmnt10 = document.getElementById("divk"+count);
        elmnt10.scrollIntoView();
    })
    break;

请提出任何有用的建议。

Answer 1

由于我看不到你的HTML和CSS代码，我不得不想象你需要什么。接下来是我的代码：

let pptoms = Array.from(document.querySelectorAll(".pptom"))

pptoms.map((p) =>{
  p.divs = Array.from(p.querySelectorAll(".box"))
})

let count = 7;
pptoms.map((p) =>{
  p.divs[count].scrollIntoView();
})




let radios = Array.from(document.querySelectorAll("#controls [name='count']"));

radios.map((r) =>{
  r.addEventListener("change",()=>{
    count = parseInt(r.value);
    console.log(count)
    pptoms.map((p) =>{
      p.divs[count].scrollIntoView();
    })
  })
})

.box {
  border: 1px solid;
  width: 5em;
  height:2em;
  line-height:2em;
  text-align: center;
  display: inline-block;
}

.container{width:50em;}

.pptom{
  width:15em; 
  border:1px solid red; 
  overflow:scroll; 
  margin: .5em;
}

<div class="pptom">
<div class="container">
<div class ="box">box a 0</div>
<div class ="box">box a 1</div>
<div class ="box">box a 2</div>
<div class ="box">box a 3</div>
<div class ="box">box a 4</div>
<div class ="box">box a 5</div>
<div class ="box">box a 6</div>
<div class ="box">box a 7</div>
<div class ="box">box a 8</div>
</div>
</div> 
<div class="pptom">
<div class="container">
<div class ="box">box b 0</div>
<div class ="box">box b 1</div>
<div class ="box">box b 2</div>
<div class ="box">box b 3</div>
<div class ="box">box b 4</div>
<div class ="box">box b 5</div>
<div class ="box">box b 6</div>
<div class ="box">box b 7</div>
<div class ="box">box b 8</div>
</div>
</div>

<form id="controls">
  <label><input type="radio" name="count" value="0"  />0</label>
  <label><input type="radio" name="count" value="7" checked />7</label> 
  <label><input type="radio" name="count" value="8"  />8</label> 
</form>

在这种情况下，我使用count = 7，但您可以使用您的逻辑来获取计数值。另外我只使用2块div，因为我不想弄乱HTML，但你可以添加任意多个。

我希望它有所帮助。如果没有，请提供更多详细信息。