javascript/jQuery – 在垂直调整页面大小时保持 div 滚动到底部？

Question

在垂直调整页面大小时，我无法将 .content div 的滚动固定在底部，即，当用户调整屏幕大小时页脚向上移动时，“窗口”一词绝对应该是最后离开 visibility 的地方。页脚应将单词“Just Some Text”插入可滚动内容，而“Window”应保持可见并位于 footer div 之上。然而，现在情况恰恰相反:当页面调整大小时，footer 向上移动覆盖单词“window”，然后是“the”，然后是“of”等，留下“Just Some Text”可见的。就像我之前说的，可以这么说，它需要是“相反的”。

所以我的问题是:如何在调整页面大小时持续滚动到底部？

这是一个 fiddle : 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();

Answer 1

您可以使用 scrollTop 方法将滚动条设置到所需位置，该方法接受一个参数，即偏移值。

在这里，您可以将一个 scrollTop 方法添加到您的“内容” block ，其中包含容器 block 高度的偏移量，这是您希望保持不变的高度。

因此将其添加到您的调整大小函数中。

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

这会让您在调整大小时一直滚动到最后。

这是一个快速检查 http://jsfiddle.net/4LQnW/6/