Как исправить полосу прокрутки всегда в нижней части div?

Я делаю простое приложение для чата, я хочу исправить полосу прокрутки div всегда внизу. Просто как это enter image description here

При загрузке индексной страницы полоса прокрутки должна быть внизу

Вот мой style.css

body{
font: 0.9em monospace;
}
   .messages{
    border: 1px solid #ccc;
    width: 250px;
    height: 210px;
    padding: 10px;
    overflow-y:scroll;

}
.message{
    color: slategrey;

}
 .message p{
    margin: 5px 0;
}
.entry{
   width: 260px;
   height: 40px;
   padding: 5px;
   margin-top: 5px;
   font: 1em fantasy;

}

Вот мой index.php

<?php
session_start();
$_SESSION['user'] = (isset($_GET['user']) === TRUE) ? (int) $_GET['user'] : 0;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
      <link rel="stylesheet" href="css/styles.css"></link>
  </head>
   <body>
      <div class="chat">
           <div class="messages" id="messages">
           </div>
        <textarea class="entry" placeholder="type here and press enter"></textarea>
    </div>
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/chat.js"> </script>
</body>

Как я могу установить это, пожалуйста, помогите мне.. Благодаря

Ответы

Ответ 1

Попробуйте этот jquery:

$(".messages").animate({ scrollTop: $(document).height() }, "slow");
  return false;

и вот скрипка: http://jsfiddle.net/EX6vs/

или ссылается на высоту элемента (многие согласны с правильным путем), как показано ниже:

$(".messages").animate({ scrollTop: $(this).height() }, "slow");
  return false;

и вот скрипка: http://jsfiddle.net/69vpnyu1/

Ответ 2

вам нужно что-то вроде этого, где поле - это div, в котором содержится ваш чат. вызовите их при загрузке страницы.

var box = document.getElementById('Box');
box.scrollTop = box.scrollHeight;

также вызывает это, когда вы публикуете новый чат.

Я создал аналогичное приложение, используя движок Google. вы можете посмотреть здесь.

http://chatter-now.appspot.com/

не стесняйтесь использовать его в качестве ссылки. хотя вы используете php, визуальные аспекты могут быть полезны.

Ответ 3

Вы можете сделать это с помощью jQuery, поскольку здесь вы можете увидеть демо:

http://jsfiddle.net/9S92E/

Ответ 4

function loadchatval(){
    $.post('loadchat.php',function(data){               
    $('#load_chat').html(data); 
    $("#load_chat").animate({ scrollTop: $(document).height() }, "slow");
    return false;
});
}

Ответ 5

Ниже строки кода для прокрутки вертикальной полосы прокрутки всегда в нижней части страницы .

$("html, body").animate({ scrollTop: $(document).height() }, "fast");

Ниже строки кода для прокрутки вертикальной полосы прокрутки всегда в нижней части прокручиваемого контейнера div с именем " daViewerContainer".

$("#daViewerContainer").animate({ scrollTop: $(document).height() }, "fast");

Ответ 6

Я исправил это с помощью

$(document).scrollTop($(document).height());

Все зависит от того, как вы настраиваете div, а затем используйте div для документа. Но это отлично работает с липкими нижними колонтитулами.