如何在可滾動的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（）