0

タスク:

Skype で HTML でチャットします。

問題:

新しいメッセージを追加した後、スクロール コンテンツはありません。

説明:

ヘッダー、コンテンツ、フッターという共通のサイト構造があります。コンテンツがヘッダーの下に「隠れる」必要がありますが、ウィンドウの表示部分にはコンテンツの一部しか残っていません (下部 (Skype のメッセージ履歴))。新しいメッセージを追加すると、コンテンツはこの新しいメッセージの高さまでスクロールする必要があり、メッセージはサイト (コンテンツ) の中央ブロックの下部に表示されますが、フッターの下には表示されません。

この場合、スクロールは可能のままです。

HTML :

<body>
<div id="header">HEADER</div>
<div id="sidebar" class="f_left">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
<div id="container" class="f_right">
  <div id="wrap3">
    <div id="wrap2">
      <div id="wrap1">
        <div id="content">
          <div id="im_nav_wrap">asdasdasdasd</div>
          <div id="im_content">
            <div class="im_rows_wrap">
            <div id="im_rows" class="im_peer_rows">
                <div class="mes">sddsfsdfsdfsdf</div>
                <div class="mes">sdfdfsdf</div>
                <div class="mes">fsdfsdf</div>
                <div class="mes">sdfsdf</div>
                <div class="mes">fsdfsdf</div>
                <div class="mes">fdsfsdfsdf</div>
                <div class="mes">fdsfsdfsdf</div>
            </div></div>
          </div>
          <div id="im_footer_wrap">
            <textarea name="dialog" id="im_textarea" cols="50" rows="6"></textarea>
            <button onclick="IM.send(this);">submit</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS :

body {
  width: 980px;
  margin: 0 auto;
}
#header {
  top: 0;
  z-index: 100;
  text-align: center;
  width: 980px;
  position: fixed;
  height: 40px;
  background: #cdcdcd;
}
#sidebar {
  top: 60px;
  width: 200px;
  height: 100px;
  background: #666;
  position: fixed;
}
.f_right {
  width: 600px;
  float: right;
}
#content {

}
#im_nav_wrap {
  position: fixed;
  top: 40px;
  z-index: 100;
  width: 400px;
  height: 70px;
  background: #ff0ccc;
}
#im_content {
  padding: 120px 0 150px ;
}
#im_rows {

}
.im_rows_wrap {
   position: relative;
}
#im_rows {
  position: absolute;
  bottom: 80px;
  width: inherit;
}
.mes {
  width: 200px;
  padding: 10px;
  background: #f6f6f6;
  margin-top: 10px;
}
#im_footer_wrap {
  height: 100px;
  width: 300px;
  position: fixed;
  bottom: 20px;
}

JS :

$(document).ready(function() {
  $('.im_rows_wrap').height($('#im_rows').height());
});

IM = {
  send: function(el) {
    var ta = $(el).prev('textarea').val();

    if (ta) {
      $('#im_rows').append('<div class="mes">' + ta + '</div>');

      $('.im_rows_wrap').height($('.im_rows_wrap').height() + $( ".mes" ).last().height())
    }
  }
};
4

1 に答える 1

0

したがって、次のようなものが必要です。

http://jsfiddle.net/CLzfW/7/

少しjQueryを使う

$('.button').click(function(e){
  e.preventDefault();
    $('.expander').slideToggle();
     $('html, body').animate({scrollTop: $(document).height()}, 'slow');
});

イベントクリック（ボタンクリック、新しいメッセージなど）でdivの一番下までスクロールし、スクロールバーも必要ですか？

于 2013-09-27T09:09:09.677 に答える