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

Well I am getting tired of being emailed the same question about my entry Scroll To Bottom of a Div. So I sat down in a few minutes I came up with this. My first attempt used onscroll, but it Opera appears to not supporet onscroll on a div. So I had to twidle my thumbs and realized I just had to use the last know position as a reference. Duh...

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;

    _scrollIfInZone();

    _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

divScroll.activeScroll();

And the magic will occur. Below is a working example (may have to refresh, example runs for 1.5 seconds):

I tested this on Win XP with IE6, Firefox 1.5, Netscape 8.04, Mozilla 1.7.12, and Opera 8.5.1 with no issues.
My MAC testers came through: Safari 2.0.4, Camino 1.0.2int, Firefox 1.5.0.5, and Opera 9.0.1 are good. Minor issue with Opera 8.52 and touchpad. I don't think that is a show stopper.

Eric Pascarello
Coauthor of Ajax In Action
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for building Dynamic Web Pages

Surprise From Dojo, not what I was expecting

Lately I have been looking into Ajax frameworks to see what they have to offer. People always ask me what framework I use and I also say I use my own or prototype. Normally I get a blank stare when I respond with that. So I started to do research to find out what toolkits offer. Now this post is not about what frameworks have to offer there are plenty out there. They all say the same thing under a 100 words or less. Search Ajaxian.com, plenty of articles on it.

When I was doing my personal research, I saw something that blew me away. It was not the functionality of a framework, but the actual coding of the website itself. I ended up at the famous website of Dojo to see what they have to offer.

Whenever I go to a so-called "Web 2.0" site, I look at Firebug to see what is going on behind the scenes. The following screenshot is what I see when I open up the Dojo's start page in my Firebug console:

How many XMLHttpRequests does a page need to load it? There are 23 GET requests! WOW.... I was lost of what to say when I saw that. Now I did not look at what is happening under the hood, but all I know is that IE only can do two connections at a time, combine that with images, CSS files, and the page itself and you get some extra loading time in there. But that was only the start to my amazement. The following also just made me scratch my chin and wonder what the developers were thinking.

I start to take notes on the features so I can remember what the frameworks have. I click on the "see it in action" tab, and than I click on "effects demo" and than "view demo". I play around with the fade, move, and explode for awhile and get ready to jot down the URL for quick reference. I really do not want to click on multiple things to re-examine the functionality in the future. Plus if a person says “Can it do this?” I can just look up my reference and send them to the demo. Better to see it in action than in some documentation. Think it has a bigger impact seeing instead of believing it works.

I go to bookmark this page and than it hit me. Wait a minute! I can not do this everyday task of surfing. It appears they used a request to get the data for the demo. So how am I supposed to point back to this page? I searched around a little more and seems like I can not do it. HMMMMM....

Now Dojo has some very nice things in it. I point out the toolkit to people when they are looking an editor and other components that other toolkits lack. The thing that turns me away from the toolkit is the coding of the website.

My biggest pet peeve with the XMLHttpRequest object is the reinvention of website navigation. Why reinvent the frame/iframe? So if you are a developer looking to use Ajax on a webpage, make sure I can bookmark a page! If you want a nice framework, look into Dojo, just do not bookmark anything!

Eric Pascarello
Coauthor of Ajax In Action
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for building Dynamic Web Pages