How to fix the scroll at the bottom?

Question

I am developing a Messaging system.I need Scroll bar to be fixed down ,Because when new data arrives It should automatically go down.How to do that in HTML/CSS Don't mine if this full code is in a unprofessional way..

Home.php

<?php
// Turn off all error reporting
error_reporting(0);
    //shop not login  users from entering 
    if(isset($_SESSION['id'])){
        $user_id = $_SESSION['id'];
    }else{

    }


require_once("./inc/connect.inc.php");
?>

<header>
    <link rel="stylesheet" href="home - Copy.css" />
        <nav>
            <h3><a class="h3" href="#">CP</a></h3>
            <div><a href="logout.php"><span>Logout</span></a></div>
                <div>        
                        <?php

   //Start your session
   session_start();
   //Read your session (if it is set)
   if (isset($_SESSION['user_login'])){

 echo '<div id="ull">'.strtoupper($_SESSION['user_login']).'</div>';
         }



       ?>

                    </div>






        </nav>
        <body>
        <div class="shead">
        <div class="a1">       <li   >Frequent Member</li>
        <div class="fm">
             <ul>
                <?php

                    //show all the users expect me
                $user_id = $_SESSION['id'];
                    $q = mysql_query("SELECT * FROM `users` WHERE id!='$user_id'");
                    //display all the results
                    while($row = mysql_fetch_assoc($q)){
                        echo "  <div class='usernames'>



                        <a id=\"usernames\" href='home.php?id={$row['id']}'>{$row['username']}</a>
                                </div> 
                        ";
                    }
                ?>
            </ul>
            </div>
        </div>




    <div class="a2">      <li >Site's Popular in Your College</li></div>

        </div>
</header>


<div class="rss">

  <?php

 // include('rssclass.php');
  //include('rss.php');

?> 
</div>

<div class="message-right">
            <!-- display message -->
            <div class="display-message">
            <?php
                //check $_GET['id'] is set
                if(isset($_GET['id'])){
                    $user_two = trim(mysql_real_escape_string( $_GET['id']));
                    //check $user_two is valid
                    $q = mysql_query( "SELECT `id` FROM `users` WHERE id='$user_two' AND id!='$user_id'");
                    //valid $user_two
                    if(mysql_num_rows($q) == 1){
                        //check $user_id and $user_two has conversation or not if no start one
                        $conver = mysql_query( "SELECT * FROM  conversation WHERE (user_one='$user_id' AND user_two='$user_two') OR (user_one='$user_two' AND user_two='$user_id')");

                        //they have a conversation
                        if(mysql_num_rows($conver) == 1){
                            //fetch the converstaion id
                            $fetch = mysql_fetch_assoc($conver);
                            $conversation_id = $fetch['id'];
                        }else{ //they do not have a conversation
                            //start a new converstaion and fetch its id
                            $q = mysql_query( "INSERT INTO `conversation` VALUES ('','$user_id',$user_two)");
                            $conversation_id = mysql_insert_id($con);
                        }
                    }else{
                        die("Invalid $_GET ID.");
                    }
                }else {
                    die("Click On the Person to start Chating.");
                }
            ?>


            </div>
            <script type="text/javascript">
            var objDiv = document.getElementById("display-message");
objDiv.scrollTop = objDiv.scrollHeight;
</script>

<div class="send-message">
                <!-- store conversation_id, user_from, user_to so that we can send send this values to post_message_ajax.php -->
                <input type="hidden" id="conversation_id" value="<?php echo base64_encode($conversation_id); ?>">
                <input type="hidden" id="user_form" value="<?php echo base64_encode($user_id); ?>">
                <input type="hidden" id="user_to" value="<?php echo base64_encode($user_two); ?>">
                <div class="textbox">
                    <input class="t_box" type="text" id="message"  placeholder="Enter Your Message"/>
                    <button class="t_btn" id="reply">Reply</button> 

                <span id="error"></span>
                </div>

            </div>
            </div>

            <!--
<div class="textbox">
    <form action="#" method="post">
<input type="text" name="msg_body" class="t_box" id="t_box" >
    <input type="submit" class="t_btn" id="t_btn" name="submit" value="Send">
</form>
        </div>-->



<script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script> 




</body>

Getmsg.php

 <?php
require_once("./inc/connect.inc.php");
if(isset($_GET['c_id'])){
    //get the conversation id and
    $conversation_id = base64_decode($_GET['c_id']);
    //fetch all the messages of $user_id(loggedin user) and $user_two from their conversation
    $q = mysql_query( "SELECT * FROM `messages` WHERE conversation_id='$conversation_id'");
    //check their are any messages
    if(mysql_num_rows($q) > 0){
        while ($m = mysql_fetch_assoc($q)) {
            //format the message and display it to the user
            $user_form = $m['user_from'];
            $user_to = $m['user_to'];
            $message = $m['message'];

            //get name and image of $user_form from `user` table
            $user = mysql_query( "SELECT username FROM `users` WHERE id='$user_form'");
            $user_fetch = mysql_fetch_assoc($user);
            $user_form_username = $user_fetch['username'];


            //display the message
            echo "
                        <div class='message'>

                            <div class='text-con'>
                                <a href='#''>{$user_form_username}:</a>
                               <p> {$message}<p>
                            </div>
                        </div>
                        <hr>";


        }
    }else{
        echo "No Messages";
    }
}

?>

Could you provide some code to show what you have already tried? — razemauze, Nov 19 '15 at 07:38
The solution, I think, is not based on CSS but on JS, so could you provide markup and some of your JS script? — Aroniaina, Nov 19 '15 at 08:20

score 1 · Answer 1 · answered Nov 19 '15 at 08:06

Your solution si based on scrollHeight, these two ling of code can help you

var objDiv = document.getElementById("toScrollBottom");
objDiv.scrollTop = objDiv.scrollHeight;

You can see this snippet for example, just click on the blue div to add messages

var count = 0;
var objDiv = document.getElementById("toScrollBottom");
objDiv.scrollTop = objDiv.scrollHeight;
$("body").on("click","#toScrollBottom",function(){
  $("#messages").append('<p>Message Line' + count + '<br/>Message line</p>');
  var objDiv = document.getElementById("toScrollBottom");
  objDiv.scrollTop = objDiv.scrollHeight;
  count++;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toScrollBottom" style="height: 150px; overflow-y: scroll; margin: 50px; border: solid 2px blue;">
  <div id="messages">
    <p>Message Line FIRST<br/>Message Line</p>
  </div>
</div>

But I've already Added the overflow-y:scroll; But its not working.And I pasted my CSS code . — Bajwa kapoor, Nov 19 '15 at 08:10

score 1 · Accepted Answer · edited May 23 '17 at 12:15

You didn't mention if you are using jQuery. If yes, you can do something like this:

$('#your_div_id').scrollTop($('#your_div_id')[0].scrollHeight);

Alternatively, only with Javascript you can find solution here: Scroll to bottom of div?

You always need to pass the height of the div to the scroll option so it is sticked to the bottom. This means that you need to bind this to the event which detects when the new message is received and rendered.

How to fix the scroll at the bottom?

2 Answers2