How to add stretching effect to a scrollable div tag

Question

Let me try to explain this. I have a div tag with class overflow . .overflow has overflow: auto in order to have scrolling. This div has several p tags with text in it. Now what I want is to have stretching kind of effect . By stretching I mean, as you see in browsers such as google chrome and safari on Mac , when user scrolls a page and when scrolling ends, then that page stretches a bit which tells user that it does not have anymore contents therefore cannot be be scrolled. So I want to add that stretching kind of effect to above div tag. How can I add it CSS, HTMl, JavaScript and/or jQuery?

here is my jsbin

here is my code.

HTML

<div class="overflow">
  <p>This is paragraph</p>
  <p>This is paragraph</p>
  <p>This is paragraph</p>
  <p>This is paragraph</p>
  <p>This is paragraph</p>
  <p>This is paragraph</p>
  <p>This is paragraph</p>
  <p>This is paragraph</p>
  <p>This is paragraph</p>
  <p>This is paragraph</p>
  <p>This is paragraph</p>
  <p>This is paragraph</p>
  <p>This is paragraph</p>
  <p>This is paragraph</p>
  <p>This is paragraph</p>
  <p>This is paragraph</p>
  <p>This is paragraph</p>
  <p>This is paragraph</p>
  <p>This is paragraph</p>
  <p>This is paragraph</p>
  <p>This is paragraph</p>
  <p>This is paragraph</p>
  <p>This is paragraph</p>
  <p>This is paragraph</p>
</div>

CSS

.overflow {
  height: 300px;
  border: 1px solid red;
  overflow: auto;
}

Answer 1

It looks like this library may have the effect you're looking for. If you wish, you can configure it to disable the page refresh or ajax callbacks and perhaps replace the "loading" animation with the "no more content" message you described:

https://github.com/jordansinger/hook.js/

RubberBand is an alternative that does a similar thing:

https://github.com/ThrivingKings/RubberBand.js

Answer 2

You could just detect the bottom of the scroll with some js and then add the stretch effect with a css animation like so:

Working Example

body {
    -webkit-transform: translate3d(0, 0, 0);
}
.overflow {
    height: 300px;
    border: 1px solid red;
    overflow: auto;
}
.bottom {
    -webkit-transform-origin: top left;
    -webkit-animation: stretch .5s;
    transform-origin: top left;
    animation: stretch .5s;
}
@-webkit-keyframes stretch {
    0% {
        -webkit-transform: scaleY(1);
    }
    50%{
      -webkit-transform: scaleY(1.25);
    }
    100% {
        -webkit-transform: scaleY(1);
    }
}
@keyframes stretch {
    0% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(1.25);
    }
    100% {
        transform: scaleY(1);
    }
}

$('.overflow').scroll(function () {

    if ($('.overflow')[0].scrollHeight - $('.overflow').scrollTop() === $('.overflow').innerHeight()) {
        $('.overflow').addClass('bottom');
    } else {
        $('.overflow').removeClass('bottom');
    }
});

Documentation:
.scroll()
.scrollHeight
.scrollTop()