如何在可滚动的div标签上添加拉伸效果

Question

让我尝试解释一下。 我有一个带有类overflow的div标签。 .overflow有overflow: auto以便滚动。 这个div有几个带有文本的p标签。 现在我想要的是具有伸展作用 。 延伸是指，如您在Mac上的google chrome and safari等浏览器中所看到的，当用户滚动页面并且滚动结束时，该页面会拉伸一点，告诉用户它不再具有内容，因此无法滚动。 因此，我想在div标签上方添加这种拉伸效果。 如何添加CSS，HTMl，JavaScript和/或jQuery？

这是我的jsbin

这是我的代码。

的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

看起来该库可能会满足您的需求。 如果愿意，可以将其配置为禁用页面刷新或Ajax回调，并用您描述的“内容不再”消息替换“正在加载”动画：

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

RubberBand是一种执行类似操作的替代方法：

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

Answer 2

您可以使用一些js检测滚动的底部，然后使用css动画添加拉伸效果，如下所示：

工作实例

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');
    }
});

说明文件：
。滚动（）
.scrollHeight
.scrollTop（）