jquery - Safari scrollTop() 不能与 Flexbox column-reverse 一起正常工作
问题描述
当元素显示为 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>
如果您在 safari 上打开此页面,您会看到滚动位置为 0,但 chrome 显示的正确结果不是 0
解决方案
这可能无法解决您的确切用例,但我在自己遇到这个问题时遇到了这个问题,并认为我会通过我的技巧来解决这个问题,以防其他人有类似的用例。我需要将一个元素滚动到顶部,但是当设置scrollTop
为0
. 我的解决方案是获取元素的高度,从 0 中减去它,然后将其设置scrollTop
为。
$('.conversation-body').scrollTop( 0 - $('.conversation-body').height() );
这是一种可怕的做法,但对于 Apple 来说这是一个可怕的错误。据我所知,它可以跨浏览器工作,因此无需检查用户是否在 Safari 上。对于实际正常工作的浏览器,它将等同于将其设置为 0。
推荐阅读
- python - 源代码字符串在 python 终端、windows 中不能包含空字节
- teradata - 子查询问题 - 所有表达式必须在 teradata 中具有显式名称
- r - 在 R 中,要将相同的过程应用于许多子集,我们是分组还是循环?
- google-drive-api - 使用 api 密钥调用 Google Drive API 会出现错误 teamDriveMembershipRequired
- matrix - 矩阵向量乘法,迷失在 Lapack 中
- r - R Shiny 获取复选框或单选按钮输入列,用于逐行反馈
- react-native - 如何为平面列表中的单个项目设置动画?
- java - 成功和错误时记录响应时间 - Webflux(即使出现错误也会调用 doOnSuccess)
- python - ValueError:没有足够的值在 Pytorch 中解压(预期 3,得到 2)
- bootstrap-4 - Print.js 和 Bootstrap 4 渲染问题