Question

任务：

以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())
    }
  }
};

Answer 1

所以你想要这样的东西：

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

使用一点jQuery

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

它会在事件点击时滚动到div的底部（例如按钮点击，新消息），你还想要一个滚动条吗？

添加新消息后固定位置视图内容（元素）

1 个答案: