CODEWITHSUNDEEP
jquerycsssafariflexboxscrolltop
Yiğithan Yücedağ
Yiğithan Yücedağ

Reputation: 21

Safari scrollTop() does not work properly with Flexbox column-reverse

JQuery scrollTop() function does not show the scroll position correctly on safari when element display is flex and flex-direction is column-reverse.

I made a little demonstration

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>

If you open this page on safari you'll see the scroll position is 0 but chrome displays the correct result which is not 0

Upvotes: 2

Views: 1552

Answers (2)

Bookamba
Bookamba

Reputation: 11

If you use css property flex-direction: column-reverse; Scroll position of this html element is also reverse

So bottom position of scroll will be equal zero (the opposite of normal top position)

But top scroll position will be negative - and equal th[0].scrollTop

So if you want to calculate scroll position like in normal(not reverse html element) you can just use this simple code

let th = $("#ID");
let scrollPosition = th[0].scrollTop + th[0].scrollHeight - th.height();

Upvotes: 1

Xandor
Xandor

Reputation: 450

This may not solve your exact use case, but I came across this question while running into this issue myself and thought I would pass along my hack to solve this in case someone else has a similar use case. I needed to scroll an element to the top but it was scrolling it to the bottom when setting scrollTop to 0. My solution was to get the height of the element, subtract that from 0, and set the scrollTop to that.

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

This is a horrible way of doing this, but this is a horrible bug for Apple to have. It works across browsers from what I can tell so no need to check if the user is on Safari or not. For browsers that actually work properly it will equate to setting it to 0.

Upvotes: 0

Related Questions