scrollIntoViews problems

by crucify

HTML

<p>
Chrome cannot handle multiple scrollIntoViews at the same time.<br>
firefox can.
</p>
<label><input type="checkbox">Press to process separately</label>
<p>
Both chrome and firefox have a problem with scrolling not only within the overflowed object, but also within the body itself.<br>
I'd prefer not to have that happen.<br>
It's a lot less useful.
</p>
<p>
scrollY
</p>
<div class="scroll scrollY"></div>
<p>
scrollX
</p>
<div class="scroll scrollX"></div>
<p>
scrollX
</p>
<div class="scroll scrollX"></div>
<p>
scrollX
</p>
<div class="scroll scrollX"></div>

CSS

.box { border:1px solid black; padding:2px; margin:2px; }
.scrollX { width:200px; height:50px; white-space:nowrap; overflow-x:scroll; }
.scrollX .box { display:inline-block; }
.scrollY { width:100px; height:100px; white-space:nowrap; overflow-y:scroll; }
.box.active { background-color:#eef; font-weight:bold; }

JavaScript

const ss = document.querySelectorAll('.scroll'), chk = document.querySelector('input[type="checkbox"]');
let i;
for(let i = 0 ; i < 20; i ++) {
	ss.forEach(s => {
    (tag => {
			tag.innerText = Math.ceil(Math.random() * 1000000);
  		tag.classList.add('box');
  		s.appendChild(tag);
    })(document.createElement('div'));
  });
}
i = 0;
setInterval(() => {
	ss.forEach(s => {
  	s.childNodes[i].classList.remove('active');
  });
  i ++;
  if(20 <= i) i = 0;
  ss.forEach((s, idx) => {
    setTimeout(() => {
    	s.childNodes[i].classList.add('active');
    	s.childNodes[i].scrollIntoView({behavior: 'smooth', block: 'nearest', inline: 'nearest'});
    }, chk.checked ? idx * 200 : 0);
  });
}, 1000);