2

ページのサイズを垂直方向に変更するときに、divのスクロールを下に固定しておくのに問題が.contentあります。つまり、ユーザーが画面のサイズを変更しているときにフッターが上に移動した場合、「ウィンドウ」という単語が最後に表示されなくなります。フッターは「JustSomeText」という単語をスクロール可能なコンテンツにプッシュする必要がありますが、「Window」は表示されたままでfooterdivの上にある必要があります。ただし、現在は逆のことが発生します。ページのサイズが変更されると、 footer「window」、「the」、「of」などの単語をカバーして上に移動し、「JustSomeText」が表示されたままになります。さっきも言ったように、いわば「反対」である必要があります。

だから私の質問は：ページのサイズ変更中に継続的に一番下までスクロールし続けるにはどうすればよいですか？

これがフィドルです：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();
4

2 に答える 2

4

オフセット値という1つの引数を取るscrollTopメソッドを使用して、スクローラーを目的の位置に設定できます。

ここで、scrollTopメソッドを'content'ブロックに追加して、コンテナブロックの高さを一定に保ちたい高さのオフセットを設定できます。

したがって、これをサイズ変更関数に追加します。

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

これにより、サイズ変更時に最後までスクロールし続けることができます。

これが簡単なチェックですhttp://jsfiddle.net/4LQnW/6/

于 2013-01-20T17:29:33.140 に答える
2

サイズ変更方法で、次を追加するだけです。

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

これは$content常に一番下までスクロールされ続けます：http：//jsfiddle.net/N672c/4/

于 2013-01-20T17:13:27.177 に答える