当元素显示为flex且flex-direction为column-reverse时,jQuery的scrollTop()函数无法在safari上正确显示滚动位置。
我做了一点示范
setInterval(function(){
alert($('.conversation-body').scrollTop())
},5000)
body {
margin: 0;
padding: 0;
background: #242424;
box-sizing: border-box;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.conversation-body {
text-align: center;
overflow-y: auto;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
flex-grow: 1;
height: 200px;
width: 300px;
background-color: #848484;
}
.conversation-body ul {
list-style: none;
}
.conversation-body li {
font-size: 90px;
text-transform: uppercase;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="conversation-body">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>f</li>
</ul>
</div>
</div>
如果您在野生动物园上打开此页面,您会看到滚动位置为0,但chrome显示的是正确的结果,而不是0
答案 0 :(得分:0)
这可能无法解决您的确切用例,但是我本人遇到此问题时遇到了这个问题,并认为如果其他人也有类似的用例,我会通过我的技巧来解决。我需要将一个元素滚动到顶部,但是当将scrollTop
设置为0
时,它正在将它滚动到底部。我的解决方案是获取元素的高度,从0中减去该高度,然后将scrollTop
设置为该高度。
$('.conversation-body').scrollTop( 0 - $('.conversation-body').height() );
这是执行此操作的可怕方法,但这对于Apple来说是一个可怕的错误。据我所知,它可以跨浏览器运行,因此无需检查用户是否在Safari上。对于实际运行正常的浏览器,这相当于将其设置为0。