Make box with scroll start scrolled to bottom

Question

I'm building a user interface for a chat web-app. So there's a div in which messages appear in a list, and the user can scroll through it. But as it's a messaging app, I want the div to be scrolled to the bottom if the user doesn't do anything (from the load of the page until the user scrolls) - and it would be great if the div could keep scrolled to the bottom when the user scrolled to the bottom again.

How could I code this? (better with css and html only rather than using javascript)

(Sorry about my bad syntax, I'm not from an English-speaking country)

Answer 1

if it is a chat box with a form at bottom, you can set focus on one of the form element or the last text generated in your chat box.: http://codepen.io/gc-nomade/pen/CztIx/

onload= function() {
  frmfcs =document.getElementById('form1');
  frmfcs.focus();
} 

---

The attribute autofocus would have been an option if it was cross browser : here one of my old test : http://dabblet.com/gist/5271266

Answer 2

var element = document.getElementById('name');
element.scrollTop = element.offsetHeight

Unfortunately, not possible with pure CSS so far.