固定位置觀看內容後增加新的消息（元素）

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

來源

2013-09-27 RomanGorbatko

所以你想要的東西，如：

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

使用位的jQuery

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

它滾動到div的一個事件點擊（如點擊按鈕，新的消息），你的底還想要一個滾動條呢？

來源

2013-09-27 09:09:09

排除。你不能使用JQuery自動滾動。在未來，它會造成一個大問題。建議您在JS上完成純粹的CSS +高容器操作。 – RomanGorbatko

我不知道從哪裏開始，沒有任何JavaScript對不起 – 2013-09-27 09:51:43

固定位置觀看內容後增加新的消息（元素）

回答

相關問題