How to apply horizontal scrolling in multiple div on a single button click?

Question

i have 10 div blocks in which horizontal scrolling is individually. what i am trying to achieve is to create a button on which click all the 10 div will scroll horizontally to a certain limit.

here is js code which i am trying to get over this problem. i am using switch case to determine which button clicked. in this i clicked on right button so the case right will be execute and the code in it.

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;

please any kind of useful suggestion is needed.

enxaneta · Accepted Answer · 2018-09-06 08:19:51Z

Since I can't see your HTML & CSS code I had to imagine what you need. Next come my code:

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>

In this case I use count = 7 but you may use your logic to get the value for count. Also I'm using only 2 blocks of divs since I didn't want to clutter the HTML, but you may add as many as you want.

I hope it helps. If it doesn't, please give more details.

Thanks you this is the right answer for my question, however i had found another way to do it by using css property transform, in which on clicking right button i am translateX(-400px); so on every click data div is auto sliding.

Collectives™ on Stack Overflow

How to apply horizontal scrolling in multiple div on a single button click?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related