I am currently working on a Messaging system and I need the scrollbar to stay fixed at the bottom so that when new data arrives, it automatically scrolls down. How can this be achieved using HTML/CSS? Please ignore any unprofessional formatting in the code provided.
https://i.sstatic.net/FJhFJ.png
Home.php
<?php
// Disabling error reporting
error_reporting(0);
// Preventing non-logged-in 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
// Starting the session
session_start();
// Reading the session (if 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
// Displaying all users except me
$user_id = $_SESSION['id'];
$q = mysql_query("SELECT * FROM `users` WHERE id!='$user_id'");
// Displaying all 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>
...
<body>
<div class="rss">
...
<script type="text/javascript">
var objDiv = document.getElementById("display-message");
objDiv.scrollTop = objDiv.scrollHeight;
</script>
...
<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'])){
// Retrieving conversation id and messages based on user ids
$conversation_id = base64_decode($_GET['c_id']);
...
?>