Tengo dos cajas con el mismo contenido pero son de diferentes dimensiones y sincronizo el scroll entre ellas por lo que si haces scroll en una sigue la otra y viceversa, el problema es que una vez que haces scroll hacia abajo parece que sigue haciendo scroll solo, es hay alguna forma de arreglar esto?

Codepen: https://codepen.io/rgbskills/pen/JjrRpVN?editors=0010

 let master = document.getElementById('text'); let slave = document.getElementById('text2'); const masterScrollHeight = master.scrollHeight; const masterClientHeight = master.clientHeight; const masterHeight = masterScrollHeight - masterClientHeight; const slaveScrollHeight = slave.scrollHeight; const slaveClientHeight = slave.clientHeight; const slaveHeight = slaveScrollHeight - slaveClientHeight; const handleScrollMaster = (e) => { const newMasterScrollTop = e.currentTarget.scrollTop; const percentageMasterDone = newMasterScrollTop / masterHeight; const newSlaveScrollTop = Math.ceil(percentageMasterDone * slaveHeight); slave.scroll({ top: newSlaveScrollTop }) } const handleScrollSlave = (e) => { const newSlaveScrollTop = e.currentTarget.scrollTop; const percentageSlaveDone = newSlaveScrollTop / slaveHeight; const newMasterScrollTop = Math.ceil(percentageSlaveDone * masterHeight); master.scroll({ top: newMasterScrollTop }) } master.addEventListener("scroll", handleScrollMaster); slave.addEventListener("scroll", handleScrollSlave);