Safari scrollTop () не работает должным образом с обратным столбцом Flexbox - PullRequest
Новая
       20

Safari scrollTop () не работает должным образом с обратным столбцом Flexbox

0 голосов
/ 10 апреля 2019

Функция JQuery scrollTop () не показывает правильное положение прокрутки в сафари, когда отображение элемента является гибким, а направление изгиба - обратным столбцом.

Я сделал небольшую демонстрацию 

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

...