Safari scrollTop() 不能与 Flexbox column-reverse 一起正常工作答案

【问题标题】：Safari scrollTop() does not work properly with Flexbox column-reverseSafari scrollTop() 不能与 Flexbox column-reverse 一起正常工作
【发布时间】：2019-08-31 20:02:58
【问题描述】：

当元素显示为 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

【问题讨论】：

标签： jquery css safari flexbox scrolltop

【解决方案1】：

这可能无法解决您的确切用例，但我在自己遇到这个问题时遇到了这个问题，并认为我会通过我的技巧来解决这个问题，以防其他人有类似的用例。我需要将一个元素滚动到顶部，但是在将 scrollTop 设置为 0 时它正在将其滚动到底部。我的解决方案是获取元素的高度，将其从 0 中减去，然后将 scrollTop 设置为该高度。

$('.conversation-body').scrollTop( 0 - $('.conversation-body').height() );

这是一种可怕的做法，但对于 Apple 来说这是一个可怕的错误。据我所知，它可以跨浏览器工作，因此无需检查用户是否在 Safari 上。对于实际正常工作的浏览器，它相当于将其设置为 0。

【讨论】：