具有 flex-direction column-reverse 的 Flex 容器不会滚动到顶部

Question

我在以下div中显示通知，以便显示容器顶部的最后一个元素：

<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>

当容器溢出时，它会自动滚动到底部。我尝试scrollTop使用以下 Javascript 进行设置，但没有成功：

function scrollNotifications() {
    var element = document.getElementById('scrollDiv')
    element.scrollTop = element.scrollHeight
}

当 y 轴溢出时，如何将容器滚动到顶部？

Answer 1

问题出在scrollTop定位上。由于反向属性，0 值将滚动到底部。简单的技巧是设置一个负值：

function scrollNotifications() {
    var element = document.getElementById('scrollDiv')
    element.scrollTop = -element.scrollHeight
}