'js scrollIntoView scrolls all li elements
I wanna do something like slot machine
But the problem is that scrollIntoView scrolls all three list when i pass only 1 list element argument to my scroll method.I think it might be the scrollIntoView fault and i dont know how to repair this.
code:
let slot1=document.querySelectorAll(".slot.one>ul>li");
let slot2=document.querySelectorAll(".slot.two>ul>li");
let slot3=document.querySelectorAll(".slot.three>ul>li");
console.log(slot2);
let btn= document.querySelector('.btn');
//console.log(slot1[1].innerHTML)
const animSlots=(asd)=>{
let rand=Math.floor(Math.random()*(9-1))+1;
console.log(rand);
asd.forEach(e=>{
if(parseInt(e.innerHTML)==rand){
e.scrollIntoView({ behavior: 'smooth', block:'nearest',inline:'start'})
}
})
}
btn.addEventListener('click',()=>{
animSlots(slot1);
})body{
background:#2e2e2e;
color:black;
display:flex;
align-items:center;
justify-content:center;
height:100vh;
flex-direction:column;
}
.slots{
height:100px;
width:30%;
background:white;
font-size:5rem;
overflow:hidden;
display:flex;
}
.slot{
width:33%;
display:flex;
align-items:center;
justify-content:center;
li{
height:100px;
}
ul{
margin:0;
padding:0;
list-style-type:none;
}
}
@keyframes slots{
from{top:0px};
to{top:-800px};
}<div class="slots">
<div class="slot one">
<ul>
<li class="one">1</li>
<li class="one">2</li>
<li class="one">3</li>
<li class="one">4</li>
<li class="one">5</li>
<li class="one">6</li>
<li class="one">7</li>
<li class="one">8</li>
<li class="one">9</li>
</ul>
</div>
<div class="slot two">
<ul>
<li class="two">1</li>
<li class="two">2</li>
<li class="two">3</li>
<li class="two">4</li>
<li class="two">5</li>
<li class="two">6</li>
<li class="two">7</li>
<li class="two">8</li>
<li class="two">9</li>
</ul>
</div>
<div class="slot three">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
</div>
<button type="button" class="btn">click</button>
Solution 1:[1]
I think this maybe will work (in html and css must manipulate).
Html:
<div class="slots">
<div class="slot one">
<ul>
<li class="reone">1</li>
<li class="reone">2</li>
<li class="reone">3</li>
<li class="reone">4</li>
<li class="reone">5</li>
<li class="reone">6</li>
<li class="reone">7</li>
<li class="reone">8</li>
<li class="reone">9</li>
</ul>
</div>
</div>
<div class="slots">
<div class="slot two">
<ul>
<li class="retwo">1</li>
<li class="retwo">2</li>
<li class="retwo">3</li>
<li class="retwo">4</li>
<li class="retwo">5</li>
<li class="retwo">6</li>
<li class="retwo">7</li>
<li class="retwo">8</li>
<li class="retwo">9</li>
</ul>
</div>
</div>
<div class="slots">
<div class="slot three">
<ul>
<li class="rethree">1</li>
<li class="rethree">2</li>
<li class="rethree">3</li>
<li class="rethree">4</li>
<li class="rethree">5</li>
<li class="rethree">6</li>
<li class="rethree">7</li>
<li class="rethree">8</li>
<li class="rethree">9</li>
</ul>
</div>
</div>
<button type="button" class="btn">click</button>
css:
body {
background: #2e2e2e;
color: black;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
flex-direction: row;
justify-content: center;
align-items: center;
}
.slots {
height: 100px;
width: 30%;
background: white;
font-size: 5rem;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | ouflak |