javascript/jQuery - 保持div滾動到底部，同時垂直調整頁面大小？

垂直調整頁面大小時，我無法將div的滾動固定在底部，例如，在用戶調整屏幕大小期間頁腳向上移動時，「窗口」一詞應該是最後移出的絕對東西的知名度。頁腳應該將「只是一些文字」字樣推入可滾動內容，而「窗口」應該保持可見並且在footer div之上。然而，現在卻出現了相反的情況：頁面大小調整後，footer向上移動，覆蓋「窗口」，然後是「the」，然後是「of」等字樣，只留下「Just Some Text」。就像我之前說過的那樣，它可以說是「相反的」。javascript/jQuery - 保持div滾動到底部，同時垂直調整頁面大小？

所以我的問題是：如何在頁面調整過程中持續滾動到底部？

這裏有一個小提琴： http://jsfiddle.net/N672c/2/

我有一個基本的HTML結構，這裏這個問題的目的：

<header></header> 

<div id="content_id" class="content"> 
     <div class="container"> 
     Just<br> 
     Some<br> 
     Text.<br> 

     Try<br> 
     resizing<br> 
     the<br> 
     height<br> 
     of<br> 
     the<br> 
     window 
    </div> 
</div> 

<footer></footer>

一些CSS以及：

header, footer { 
    position: fixed; 
    left: 0; right: 0; 
    height: 100px; 
    background: teal; 
} 

header { top: 0 } 
footer { bottom: 0 } 

.content { 
    position: fixed; 
    top: 100px; bottom: 100px; 
    left: 0; right: 0; 
    overflow-y: scroll; 
    } 

.container { 
    padding: 20px; 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 0; 
}

和一個小量的javascript：

var $content = $('.content'), 
$container = $('.container'), 
containerHeight = $container.outerHeight(); 

$(window).resize(function() { 
     $container.css({ 
     position: $content.innerHeight() > containerHeight ? 'absolute' : 'static' 
     }); 
}).resize();

來源

2013-01-20 JohnZ

您可以通過使用scrollTop的方法，這需要一個設置滾動條到所需的位置參數，偏移值。

在這裏，你可以添加一個scrollTop方法到你的'內容'塊與容器塊高度的偏移量，這是你想保持它不變的高度。

所以添加到您的調整大小功能。

$content.scrollTop($container.height());

這會讓您在調整大小時滾動到最後。

這是一個快速檢查http://jsfiddle.net/4LQnW/6/

來源

2013-01-20 17:29:33 Rocky

這工作完美。謝謝！哇，我總是忽略一些簡單可笑的事情...... – JohnZ

在大小調整方法只需添加：

$content.scrollTop($content.height());

這將讓$content滾動，不斷底：http://jsfiddle.net/N672c/4/

來源

2013-01-20 17:13:27

你說得對。但是您使用同一個塊的高度來滾動塊，而不是必須捲起的塊。 – Rocky

javascript/jQuery - 保持div滾動到底部，同時垂直調整頁面大小？

回答

相關問題