javascript - 如何为可滚动的 div 标签添加拉伸(stretch)效果

Question

让我试着解释一下。我有一个带有 overflow 类的 div 标签。 .overflow 有 overflow: auto 以便滚动。这个 div 有几个带有文本的 p 标签。现在我想要的是拉伸(stretch)效果。我所说的拉伸(stretch)是指，正如您在 Mac 上的 google chrome 和 safari 等浏览器中看到的那样，当用户滚动页面和滚动结束时，然后该页面会拉伸(stretch)一点，告诉用户它没有更多内容，因此无法滚动。所以我想在上面的 div 标签中添加那种拉伸(stretch)效果。 如何添加 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