Para la reproducción, desplace el pulgar hasta el final de la barra de desplazamiento y cambie el tamaño de la ventana: https://jsfiddle.net/coryphoenixxx/zLq3u4sn/36/
¿Cómo detener esto y mantener los tamaños de la caja interior en 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 encontre solucion
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); });