将div自动滚动至底部

-6

我有一个用于我的网站的聊天模块。我有一个div用于显示我的消息，当我打开聊天页面时，我想让它滚动到div的底部。最近的消息出现在底部。将div自动滚动至底部

下面是HTML和CSS代码正在使用 /CSS/

#pageMiddle_message{ 
    margin-left:280px; 
    background:#FFF; 
    width: 700px; 
    height: 592px; 
    border-radius: 5px; 
    padding-bottom:0px; 
    position:fixed; 
    border: orange 2px solid; 
} 
#message{ 
    width:auto; 
    height:100px; 
} 
#chat{ 
    background:orange; 
    color: #fff; 
} 
#no_chat{ 
    background:orange; 
    color: #fff; 
    height:42px; 
    line-height:0.11857143em; 
} 
#head_chat{ 
    color:#fff; 
    line-height: 0.82857143em; 
} 
.sub_paneln{ 
    text-transform:capitalize; 
    color: #444; 
    font-weight:500; 
    background-size: 1px 1px; 
    line-height: 0.82857143em; 
    list-style:none; 
} 
.my_message{ 
    float:right; 
    background-color:#DFFFFB; 
    list-style:none; 
    border-radius:8px; 
    border: #39F 1px solid; 
} 
.their_message{ 
    float:left; 
    background-color:#0ADEF5; 
    border-radius:8px; 
    list-style:none; 
    border: #06F 1px solid; 
    position:inherit; 
} 
.line_message{ 
    color: #444; 
    font-weight:500; 
    background-size: 1px 1px; 
    line-height: 0.82857143em; 
    list-style:none; 
} 
.message_list{ 
    background:#fff; 
    padding:2px; 
    height:445px; 
    max-height:600px; 
    overflow-y:auto; 
    position:relative; 
} 
.message_body{ 
    border-radius: 5px; 
    height:auto; 
} 
#text_message{ 
    width:670px; 
    margin-top:2px; 
    margin-left:23px; 
    background-color:#D2D2D2; 
    padding:0px; 
} 

/*HTML*/ 
<div class="message_body">  
<div id="message_list" class="message_list">messagelist</div> 
<div id="message" class="new_message" style="height:auto;"></div> 
<div style="background:#D2D2D2; height:97px; border-radius:4px;"> 
<div id="text_message"> 
<table width="" height=""> 
    <tr> 
    <th width="auto" style="float:left;"> 
    <a href=""><img src="" width="60" height="60" style="border-radius:5px;"/> 
    </a></th><th style="float:left;"><textarea name="sendmessage" style="width:579px; height:55px; border:orange 2px solid; border-radius:3px;" id="sendmessage" placeholder="send message to messager></textarea></th></th></tr></table> 
    <div style="float:right; padding-right:4px; margin-right:15px; margin-top:-3px;"> 
<input name="send" type="submit" value="send message" onClick="javascript:ajax_send();"> 
</div> 
    </div> 
    </div> 
    </div>

来源

2016-08-19 Bogere Nasser

你能给我们提供更多的细节吗？你的代码到目前为止看起来如何？ – Apolymoxic

欢迎来到Stack Overflow！预计你至少试图为自己编码。堆栈溢出不是代码写入服务。我建议你做一些[**额外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），无论是通过谷歌或通过搜索，做出尝试和。如果您仍然遇到麻烦，请返回**您的代码**并解释您尝试过的以及为什么它不起作用。 –

我已经上传了代码...让我知道你在想什么 –

你可以，使用jQuery，计算div的底部，然后滚动到它：

var $div = $("message_list"); 
var divpos = $div.offset(); 
var divheight = $div.height(); 
var divbottom = divpos.top + divheight; 
var windowheight = $(window).height(); 
$(window).scrollTop(divbottom - windowheight);

变量用于计算div的底部，然后$(window).scrollTop()滚动到传递的位置。 divbottom - windowheight使页面滚动，以使div的底部与屏幕底部相匹配。

来源

2016-08-23 23:41:51

将div自动滚动至底部

回答

相关问题