如何給可滾動的div標籤添加伸縮效果

Question

讓我試着解釋一下。我有div標籤，overflow。 .overflow有overflow: auto爲了滾動。這div有幾個p標籤中包含文字。現在我想要的是舒展類效果。通過拉伸我的意思是，當你在 瀏覽器中看到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/

橡皮筋是做替代類似的事情：

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()