Keeping the new contents of a growing list in view
The purpose of this code is to demonstrate how to keep the content at the bottom of a list always in view, similar to a chat window. Keywords: div, overflow, scroll, scrolltop. Reference: scrollTop Property http://snipr.com/1wdbn [msdn2.microsoft.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>scrolling div</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <style type="text/css"> <!-- body {background-color: #43d;} div#list {background-color: #4e8; overflow: scroll; width: 15em; height: 10em;} p.other_user {background-color: #af5;} p {background-color: #ed3;} --> </style> <script type="text/javascript"> function addText() { olist = document.getElementById('list'); op = document.createElement('p'); op.innerHTML = 'hi'; ocontent = document.getElementById('content'); ocontent.appendChild(op); olist.scrollTop = olist.scrollHeight; } </script> </head> <body> <div id="toolbar"><input type="button" value="add text" onclick="addText()" /></div> <p>A simple chat style display</p> <div id="list"> <div id="content"> <p class="other_user">Good <strong>afternoon</strong> how are you?</p> <p class="other_user">hello?</p> <p class="other_user">is anybody there?</p> </div> </div> </body> </html>
