0

I've seen a lot of solutions using JavaScript, but I'm trying to do this just using HTML/CSS/PHP.

I have a table where the content is loaded with php from a database, and I made it scrollable. Now I want the scrolling to start at the bottom.

Here is my PHP:

echo "<table>";
    //get messages
    $get_m = "select user_name, message, time from Chat NATURAL JOIN User where user_id = 1;";
   $messages = $db->query($get_m);
   //display messages

   foreach ($messages as $row) {
        //display each message in table
        echo "<tr>";
        echo "<td class='left'>" . $row['user_name'] . "</td>";
        echo "<td class='center'>" . $row['message'] . "</td>";
        echo "<td class='right'>" . $row['time'] . "</td>";
        echo "</tr>";
   }
        //end table
        echo "</table>";

Here is my CSS:

#chat_tab table{
    position:               relative;
    display:                block;
    overflow-y:             scroll;
    scrollTop:              scrollHeight;
}

Thanks!

swallis1
  • 99
  • 1
  • 13

1 Answers1

0

Throw one of these at the bottom of your scrolling div. Style it to hide it. This isn't always supported but it should scroll down to autofocus on this zombie input field.

<input type="text" autofocus></input>
RightClick
  • 1,090
  • 7
  • 12