Automatically scroll to bottom of div using Tiny Scrollbar

Question

I\'m coding a shoutbox and making it as user friendly as possible. It uses the Tiny Scrollbar plugin for jQuery and I want to incorporate an extra function that will allow me to

Answer 1

You could also use the native jQuery animate function to achieve the smooth auto scroll. And there is no need to alter the original tiny scrollbar script.

//Get the heights of the overview and viewport
oHeight = $('.overview:first').css("height");
oHeight = oHeight.substring(0, oHeight.length-2);

vHeight = $('.viewport:first').css("height");
vHeight = vHeight.substring(0, vHeight.length-2);

//Use the height values to determine how far we need to scroll
scroll = oHeight - vHeight;

//Animate it
$('.overview:first').animate({
    top: "-"+scroll+"px"
    }, 5000, function() {
        // Animation complete.
    });

//We need to do the same work for the track
tHeight = $('.thumb:first').css("height");
tHeight = tHeight.substring(0, tHeight.length-2);

trHeight = $('.track:first').css("height");
trHeight = trHeight.substring(0, trHeight.length-2);
tScroll = trHeight - tHeight;


$('.thumb:first').animate({
    top: tScroll+"px"
    }, 5000, function() {
        // Animation complete.
    }, 5000);
});

Answer 2

According to the docs you can fire down to the bottom of the scroll bar by calling {$(element).tinyscrollbar_update('bottom')}

Answer 3

I had this same need. To address it, add the following function into the code after the this.update function:

this.bottom = function(){
  iScroll = oContent[options.axis] - oViewport[options.axis];
  oThumb.obj.css(sDirection, iScroll / oScrollbar.ratio);
  oContent.obj.css(sDirection, -iScroll);
};

Then, on your page, add a call to bottom() after your scrollbar's update() call:

scrollBar.update();
scrollBar.bottom();

Seems to work fine for me.

Robby

Answer 4

$('.overview:first').css({top: (($('.overview:first').height() - $('.viewport:first').height()) * (-1)) });
$('.thumb:first').css({top: $('.track:first').height() - $('.thumb:first').height()});