For reprodution set scroll thumb to end of scrollbar and change window size: https://jsfiddle.net/coryphoenixxx/zLq3u4sn/36/
How to stop this and keep sizes of inner box in vw?
<html>
<body>
<div class='box'>
<div class='inner-box'></div>
<div class='inner-box'></div>
<div class='inner-box'></div>
<div class='inner-box'></div>
<div class='inner-box'></div>
<div class='inner-box'></div>
<div class='inner-box'></div>
<div class='inner-box'></div>
<div class='inner-box'></div>
</div>
</body>
</html>
.box {
width: 30vw;
height: 12vw;
border: 0.1vw solid black;
display: flex;
flex-direction: row;
overflow-x: scroll;
overflow-y: hidden;
}
.inner-box {
margin: 1vw;
min-width: 7vw;
height: 7vw;
border: 0.1vw solid black;
}
Ok, I found solution
const box = document.querySelector('.box');
let boxScrollPct = 0;
let ignoreScroll = false;
box.addEventListener('scroll', ({ target: t }) => {
if (ignoreScroll) return;
boxScrollPct = t.scrollLeft / (t.scrollWidth - t.clientWidth);
});
let timeOutId = null;
window.addEventListener('resize', e => {
ignoreScroll = true;
box.scrollLeft = boxScrollPct * (box.scrollWidth - box.clientWidth);
clearTimeout(timeOutId);
timeOutId = setTimeout(() => {
ignoreScroll = false;
}, 50);
});