0

任务：

使用 HTML 在 Skype 上进行聊天。

问题：

添加新消息后没有滚动内容。

说明：

有一个共同的网站结构：页眉、内容和页脚。有必要将内容“隐藏”在标题下，但在窗口的可见部分中仅保留部分内容（下部（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 回答