Прокрутите 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) , либо через Google, либо путем поиска SO, сделайте попытку и. если у вас все еще есть проблемы, вернитесь ** с кодом ** и объясните, что вы пробовали, и почему это не сработало. –

Я загрузил код ... Позвольте мне знать, что вы думаете, ребята –

Вы можете, используя 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 донизу автоматически

ответ

Смежные вопросы