[英]Flex container with flex-direction column-reverse will not scroll to top
I am displaying notifications in the following div in order to show the last elements at the top of the container:我在下面的 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>
Automatically, when the container overflows, it is scrolled to the bottom.自动地,当容器溢出时,它会滚动到底部。 I have tried to set
scrollTop
using the following Javascript with no success:我尝试使用以下 Javascript 设置
scrollTop
但没有成功:
function scrollNotifications() {
var element = document.getElementById('scrollDiv')
element.scrollTop = element.scrollHeight
}
How can I scroll the container to the top when overflowing on the y axis?在 y 轴上溢出时如何将容器滚动到顶部?
The problem was with the scrollTop
positioning.问题出在
scrollTop
定位上。 The 0 value will scroll to the bottom because of the reverse direction property.由于反向属性,0 值将滚动到底部。 The simple trick was to set a negative value:
简单的技巧是设置一个负值:
function scrollNotifications() {
var element = document.getElementById('scrollDiv')
element.scrollTop = -element.scrollHeight
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.