javascript / jQuery - 在垂直调整页面大小的同时保持div滚动到底部？ [英] javascript/jQuery – Keep a div scrolled to the bottom while resizing the page vertically?

问题描述

我无法在垂直调整页面大小时将 .content div的滚动固定在底部，即在用户调整屏幕大小时向上移动时，窗口这个词应该是移出能见度的绝对最后一件事。页脚应将Just Some Text字样推入可滚动内容，而Window应保持可见并位于页脚 div之上。然而，现在却出现了相反的情况：当页面调整大小时，页脚向上移动，覆盖窗口，后跟the，then等，留下Just Some Text可见。就像我之前说的那样，它可以说是相反的。

I'm having trouble keeping the .content div's scroll pinned to the bottom when resizing the page vertically, i.e., When the footer moves upward during a user resizing the screen, the word "window" should be the absolute last thing to move out of visibility. The footer should push the words "Just Some Text" into the scrollable content, while "Window" should remain visible and atop the footer div. Right now, however, the opposite occurs: when the page is resized, footer moves upwards covering the words "window" followed by "the," then "of," etc, leaving "Just Some Text" visible. Like I said earlier, it needs to be the "opposite" so to speak.

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

So my question is: How do I continuously keep scroll to the bottom during a page resize?

这里是小提琴：
http://jsfiddle.net/N672c/2/

为了这个问题，我在这里有一个基本的html结构：

I have a basic html structure here for the purposes of this question:

 <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：

And a small amount of javascript:

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

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

推荐答案

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

You can set the scroller to the desired position by using the scrollTop method, which takes one argument, the offset value.

在这里，您可以向您的'content'块添加一个scrollTop方法，其偏移量为容器块高度，是你希望它保持不变的高度。

Here you can add a scrollTop method to your 'content' block with an offset of the container block height which is the height you want to keep it as constant.

所以将它添加到你的调整大小函数中。

So add this into your resize function.

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

这会让你在调整大小时滚动到最后。

This'll keep you scrolled to the end on resizing.

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

这篇关于javascript / jQuery - 在垂直调整页面大小的同时保持div滚动到底部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！