Estoy mostrando notificaciones en el siguiente div para mostrar los últimos elementos en la parte superior del contenedor:
<div class="flex h-full max-h-full pt-36"> <div id="scrollDiv" class="justify-bottom z-20 flex w-full flex-col-reverse items-center overflow-y-scroll scrollbar-thin"> <div class="notification"></div> <div class="notification"></div> <div class="notification"></div> <div class="notification"></div> </div> </div> Automáticamente, cuando el contenedor se desborda, se desplaza hasta el fondo. Intenté configurar scrollTop usando el siguiente Javascript sin éxito:
function scrollNotifications() { var element = document.getElementById('scrollDiv') element.scrollTop = element.scrollHeight }¿Cómo puedo desplazar el contenedor hacia arriba cuando se desborda en el eje y?
El problema estaba en el posicionamiento de scrollTop . El valor 0 se desplazará hacia abajo debido a la propiedad de dirección inversa. El truco simple fue establecer un valor negativo:
function scrollNotifications() { var element = document.getElementById('scrollDiv') element.scrollTop = -element.scrollHeight }