Question

让我试着解释一下。我有一个div标记，其中包含类overflow。 .overflow有overflow: auto才能滚动。此div包含多个p个标记，其中包含文字。现在我想要的是拉伸效果。通过拉伸我的意思是，正如您在google chrome and safari Mac等浏览器中所看到的那样，当用户滚动页面并滚动结束时，该页面会拉伸一点告诉用户它不再有内容因此无法滚动。所以我想在上面的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动画添加拉伸效果，如下所示：

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

文档：
.scroll()
.scrollHeight
.scrollTop()

如何将拉伸效果添加到可滚动的div标签

2 个答案: