javascript / jQuery –在垂直调整页面大小的同时将div滚动到底部吗？

Question

垂直调整页面大小时，我无法将.content div的滚动固定在底部，即在用户调整屏幕大小时页脚向上移动时，“ window”一词绝对是移出该页面的最后一件事。能见度。 页脚应将单词“ Just Some Text”推入可滚动的内容，而“ Window”应保持可见并位于footer div的顶部。 但是，现在，情况恰恰相反：调整页面大小时， footer向上移动，覆盖单词“ window”，后跟“ the”，“ of”等，从而使“ Just Some Text”可见。 就像我之前说的，可以说它必须是“对立的”。

所以我的问题是：在页面调整大小期间如何连续滚动到底部？

这是一个小提琴： 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”方法添加到“内容”块，其偏移量为容器块的高度，该高度是您要使其保持恒定的高度。

因此，将此添加到您的调整大小功能。

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

这将使您在调整大小时滚动到最后。

快速检查一下http://jsfiddle.net/4LQnW/6/

Answer 2

在resize方法中，只需添加：

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

这将使$content不断滚动到底部： http : //jsfiddle.net/N672c/4/