Scroll to bottom when overflow hidden

by Jernej Slejko

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="main">
    <div class="content">
        <p>
            TOP is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that
        </p>
        <p>
            long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution. BOTTOM
        </p>
    </div>
</div>

CSS

.main {
  height: 200px;
  width: 200px;
  background: gray;
  overflow: hidden;
  position: relative;
}
.content {
  position: absolute;
}

JavaScript

// js to "scroll" to bottom
function scroll() {
  const hContent = $('.main .content').height();
  const hView = $('.main').height();
  const offset = hView - hContent;

  if (offset < 0) {
    $('.main .content').css('top', `${offset}px`)
  }
}

$(document).ready(function() {
  scroll();
});