Tuve un problema con el desplazamiento de div usando flex-direction: column-reverse;

Aquí está mi parte 'visible' del código:

 .messagesBox { overflow-y: scroll; padding: 10px; row-gap: 2px !important; overflow: auto; display: flex; flex-direction: column-reverse; width: "100%"; } <div id="messagesBox" onScroll={onScroll} className={styles.messagesBox} > {renderContent()} </div>

Creo este div para mostrar una matriz de objetos, configurados verticalmente con scrool sticky to bottom gracias a column-reverse (necesito usar esto porque no tengo contacto con el lado del servidor).

Aquí está mi función onScroll :

 const onScroll = () => { const box = document.getElementById("messagesBox"); console.log(box.scrollTop);//-267 on top div, 0 on bottom div, I need reverse this values }

cuando desplazo mi div hacia arriba, la función scrollTop me devuelve valores incorrectos, cuando estoy en la parte superior, me devuelve algunos valores negativos como -267.7 , pero cuando me desplazo hacia abajo, me devuelve 0 .

¿Alguien puede decirme cómo obtener los valores correctos y obtener 0 de scrollTop cuando scrool está en la parte superior?

¡Gracias por cualquier ayuda!

////////////////////////////