View Full Version : Resolved How to auto scroll down until user manually scroll up?

08-26-2008, 02:59 PM
I'm sorry if this has been asked before, I might overlooked the answer in my searches...

I'm looking for a way scroll down the page (or div element) as the text starts overflow (i.e. it could be a chat box or log window, where text constantly grows in time). I found several scripts that will automatically scroll to the bottom, but none of them have any kind of check if user decided manually scroll up, which makes such method useless.

What I'm looking for is have auto scroll which should stop as soon as user manually scroll up. After auto scroll stopped (note, the text still coming) and user scroll the page all the way down, it should automatically resume auto scroll.

Thank you.

08-28-2008, 05:49 AM
Just found the solution:

Allow user to scroll and maintain position with "Scroll To Bottom of the Div" example

So how do I keep the scroll position of a div if the user scrolls it and also allow for it to stick to the bottom?

Put this code in your head:

var chatscroll = new Object();

chatscroll.Pane = function(scrollContainerId){
this.bottomThreshold = 20;
this.scrollContainerId = scrollContainerId;
this._lastScrollPosition = 100000000;

chatscroll.Pane.prototype.activeScroll = function(){

var _ref = this;
var scrollDiv = document.getElementById(this.scrollContainerId);
var currentHeight = 0;

var _getElementHeight = function(){
var intHt = 0;
if(scrollDiv.style.pixelHeight)intHt = scrollDiv.style.pixelHeight;
else intHt = scrollDiv.offsetHeight;
return parseInt(intHt);

var _hasUserScrolled = function(){
if(_ref._lastScrollPosition == scrollDiv.scrollTop || _ref._lastScrollPosition == null){
return false;
return true;

var _scrollIfInZone = function(){
if( !_hasUserScrolled ||
(currentHeight - scrollDiv.scrollTop - _getElementHeight() <= _ref.bottomThreshold)){
scrollDiv.scrollTop = currentHeight;
_ref._isUserActive = false;

if (scrollDiv.scrollHeight > 0)currentHeight = scrollDiv.scrollHeight;
else if(scrollDiv.offsetHeight > 0)currentHeight = scrollDiv.offsetHeight;


_ref = null;
scrollDiv = null;


Create a new instance with the name of the div;

var divScroll = new chatscroll.Pane('divExample');

When ever you add something to the div call the method activeScroll