Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
746 views
in Technique[技术] by (71.8m points)

jquery - how to fix the scrollbar always at the bottom of a div?

I am doing a simple chat application,I want to fix the scrollbar of a div always at the bottom.just like thisenter image description here

When loading the index page the scrollbar must be at the bottom

Here is my 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;

}

Here is my 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>

How can i set this,please help me.. Thanks

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Try this jquery :

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

and here is the fiddle : http://jsfiddle.net/EX6vs/

or refers to the height of the element (many agree is the right way), as below:

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

and here is the fiddle : http://jsfiddle.net/69vpnyu1/


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...