Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jan 2003
    Posts
    39
    Thanks
    0
    Thanked 4 Times in 4 Posts

    Question How to auto scroll down until user manually scroll up?

    Hello!
    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.
    Last edited by V@no; 08-28-2008 at 05:58 AM.
    V@no.

  • #2
    New Coder
    Join Date
    Jan 2003
    Posts
    39
    Thanks
    0
    Thanked 4 Times in 4 Posts

    Found

    Just found the solution:
    http://radio.javaranch.com/pascarell...837038219.html
    Quote Originally Posted by http://radio.javaranch.com/pascarello/2006/08/17/1155837038219.html
    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:

    Code:
      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;

    Code:
    var divScroll = new chatscroll.Pane('divExample');
    When ever you add something to the div call the method activeScroll

    Code:
    divScroll.activeScroll();
    V@no.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •