Jquery 使用小滚动条自动滚动到div的底部

我正在编写一个shoutbox，并使其尽可能对用户友好。它使用for jQuery，我想加入一个额外的函数，让它位于

div

的底部。它应该自动滚动（可能具有平滑的动画效果）到底部

以下是实际的微小滚动条形码：

(function($){
$.tiny = $.tiny || { };

$.tiny.scrollbar = {
    options: {  
        axis: 'y', // vertical or horizontal scrollbar? ( x || y ).
        wheel: 40,  //how many pixels must the mouswheel scroll at a time.
        scroll: true, //enable or disable the mousewheel;
        size: 'auto', //set the size of the scrollbar to auto or a fixed number.
        sizethumb: 'auto' //set the size of the thumb to auto or a fixed number.
    }
};  

$.fn.tinyscrollbar = function(options) { 
    var oElement = null;
    var options = $.extend({}, $.tiny.scrollbar.options, options); 

    this.each(function() {  
        oElement = new Scrollbar($(this), options);
    });
    return $.extend(this, oElement);
};

function Scrollbar(root, options){
    var oSelf = this;
    var oWrapper = root;
    var oViewport = { obj: $('.viewport', root) };
    var oContent = { obj: $('.overview', root) };
    var oScrollbar = { obj: $('.scrollbar', root) };
    var oTrack = { obj: $('.track', oScrollbar.obj) };
    var oThumb = { obj: $('.thumb', oScrollbar.obj) };
    var sAxis = options.axis == 'x', sDirection = sAxis ? 'left' : 'top', sSize = sAxis ? 'Width' : 'Height';
    var iScroll, iPosition = { start: 0, now: 0 }, iMouse = {};

    function initialize() { 
        oSelf.update();
        setEvents();
        return oSelf;
    }
    this.update = function(bKeepScroll){            
        oViewport[options.axis] = oViewport.obj[0]['offset'+ sSize];
        oContent[options.axis] = oContent.obj[0]['scroll'+ sSize];
        oContent.ratio = oViewport[options.axis] / oContent[options.axis];
        oScrollbar.obj.toggleClass('disable', oContent.ratio >= 1);
        oTrack[options.axis] = options.size == 'auto' ? oViewport[options.axis] : options.size;
        oThumb[options.axis] = Math.min(oTrack[options.axis], Math.max(0, ( options.sizethumb == 'auto' ? (oTrack[options.axis] * oContent.ratio) : options.sizethumb )));
        oScrollbar.ratio = options.sizethumb == 'auto' ? (oContent[options.axis] / oTrack[options.axis]) : (oContent[options.axis] - oViewport[options.axis]) / (oTrack[options.axis] - oThumb[options.axis]);
        iScroll = (bKeepScroll && oContent.ratio <= 1) ? Math.min((oContent[options.axis] - oViewport[options.axis]), Math.max(0, iScroll)) : 0;
        setSize();
    }
    function setSize(){
        oThumb.obj.css(sDirection, iScroll / oScrollbar.ratio);
        oContent.obj.css(sDirection, -iScroll);
        iMouse['start'] = oThumb.obj.offset()[sDirection];
        var sCssSize = sSize.toLowerCase(); 
        oScrollbar.obj.css(sCssSize, oTrack[options.axis]);
        oTrack.obj.css(sCssSize, oTrack[options.axis]);
        oThumb.obj.css(sCssSize, oThumb[options.axis]);     
    };      
    function setEvents(){
        oThumb.obj.bind('mousedown', start);
        oThumb.obj[0].ontouchstart = function(oEvent){
            oEvent.preventDefault();
            oThumb.obj.unbind('mousedown');
            start(oEvent.touches[0]);
            return false;
        }           
        oTrack.obj.bind('mouseup', drag);
        if(options.scroll && this.addEventListener){
            oWrapper[0].addEventListener('DOMMouseScroll', wheel, false);
            oWrapper[0].addEventListener('mousewheel', wheel, false );
        }
        else if(options.scroll){oWrapper[0].onmousewheel = wheel;}
    };
    function start(oEvent){
        iMouse.start = sAxis ? oEvent.pageX : oEvent.pageY;
        var oThumbDir = parseInt(oThumb.obj.css(sDirection));
        iPosition.start = oThumbDir == 'auto' ? 0 : oThumbDir;
        $(document).bind('mousemove', drag);
        document.ontouchmove = function(oEvent){
            $(document).unbind('mousemove');
            drag(oEvent.touches[0]);
        };
        $(document).bind('mouseup', end);
        oThumb.obj.bind('mouseup', end);
        oThumb.obj[0].ontouchend = document.ontouchend = function(oEvent){
            $(document).unbind('mouseup');
            oThumb.obj.unbind('mouseup');
            end(oEvent.touches[0]);
        }
        return false;
    };      
    function wheel(oEvent){
        if(!(oContent.ratio >= 1)){
            oEvent = $.event.fix(oEvent || window.event);
            var iDelta = oEvent.wheelDelta ? oEvent.wheelDelta/120 : -oEvent.detail/3;
            iScroll -= iDelta * options.wheel;
            iScroll = Math.min((oContent[options.axis] - oViewport[options.axis]), Math.max(0, iScroll));
            oThumb.obj.css(sDirection, iScroll / oScrollbar.ratio);
            oContent.obj.css(sDirection, -iScroll);
            oEvent.preventDefault();
        };
    };
    function end(oEvent){
        $(document).unbind('mousemove', drag);
        $(document).unbind('mouseup', end);
        oThumb.obj.unbind('mouseup', end);
        document.ontouchmove = oThumb.obj[0].ontouchend = document.ontouchend = null;
        return false;
    };
    function drag(oEvent){
        if(!(oContent.ratio >= 1)){
            iPosition.now = Math.min((oTrack[options.axis] - oThumb[options.axis]), Math.max(0, (iPosition.start + ((sAxis ? oEvent.pageX : oEvent.pageY) - iMouse.start))));
            iScroll = iPosition.now * oScrollbar.ratio;
            oContent.obj.css(sDirection, -iScroll);
            oThumb.obj.css(sDirection, iPosition.now);;
        }
        return false;
    };

    return initialize();
};
 })(jQuery);

（函数（$）{
$.tiny=$.tiny |{}；
$.tiny.scrollbar={
选项：{
轴：“y'，//垂直或水平滚动条？（x | | y）。
滚轮：40，//鼠标滚轮一次必须滚动多少像素。
滚动：true，//启用或禁用鼠标滚轮；
大小：'自动'，//将滚动条的大小设置为自动或固定数字。
sizethumb:'auto'//将拇指大小设置为auto或固定数字。
}
};  
$.fn.tinyscrollbar=函数（选项）{
var-oElement=null；
var options=$.extend（{}，$.tiny.scrollbar.options，options）；
此.each（function（）{
oElement=新的滚动条（$（此），选项）；
});
返回$.extend（此，oElement）；
};
功能滚动条（根，选项）{
var oSelf=此；
var-oWrapper=根；
var oViewport={obj:$（'.viewport'，root）}；
var oContent={obj:$（'.overview'，root）}；
var oScrollbar={obj:$（'.scrollbar'，root）}；
var oTrack={obj:$（'.track'，oScrollbar.obj）}；
var oThumb={obj:$（'.thumb'，oScrollbar.obj）}；
var sAxis=options.axis='x'，sddirection=sAxis？'left'：'top'，sSize=sAxis？'Width'：'Height'；
var iScroll，iPosition={start:0，now:0}，iMouse={}；
函数初始化（）{
update（）；
setEvents（）；
回归自我；
}
this.update=函数（bKeepScroll）{
oViewport[options.axis]=oViewport.obj[0]['offset'+sSize]；
oContent[options.axis]=oContent.obj[0]['scroll'+sSize]；
oContent.ratio=oViewport[options.axis]/oContent[options.axis]；
oScrollbar.obj.toggleClass（'disable'，oContent.ratio>=1）；
oTrack[options.axis]=options.size==“自动”？oViewport[options.axis]：options.size；
oThumb[options.axis]=Math.min（oTrack[options.axis]，Math.max（0，（options.sizethumb=='auto'？（oTrack[options.axis]*oContent.ratio）：options.sizethumb））；
oScrollbar.ratio=options.sizethumb=='auto'？（oContent[options.axis]/oTrack[options.axis]）：（oContent[options.axis]-oViewport[options.axis]）/（oTrack[options.axis]-oThumb[options.axis]）；
iScroll=（bKeepScroll&&oContent.ratio=1））{
oEvent=$.event.fix（oEvent | | window.event）；
var iDelta=oEvent.wheelDelta？oEvent.wheelDelta/120：-oEvent.detail/3；
iScroll-=iDelta*options.wheel；
iScroll=Math.min（（oContent[options.axis]-oViewport[options.axis]），Math.max（0，iScroll））；
oThumb.obj.css（SDdirection，iScroll/oScrollbar.ratio）；
oContent.obj.css（SDdirection，-iScroll）；
oEvent.preventDefault（）；
};
};
功能结束（oEvent）{
$（文档）.unbind（'mousemove'，拖动）；
$（文档）.unbind（'mouseup'，end）；
oThumb.obj.unbind（'mouseup'，end）；
document.ontouchmove=oThumb.obj[0]。ontouchend=document.ontouchend=null；
返回false；
};
功能拖动（oEvent）{
如果（！（oContent.ratio>=1））{
iPosition.now=Math.min（（oTrack[options.axis]-oThumb[options.axis]），Math.max（0，（iPosition.start+（（sAxis？oEvent.pageX:oEvent.pageY）-imuse.start））；
iScroll=iPosition.now*oScrollbar.ratio；
oContent.obj.css（SDdirection，-iScroll）；
oThumb.obj.css（sddirection，iPosition.now）；；
}
返回false；
};
返回initialize（）；
};
})（jQuery）；

---

如果你能修改它来做到这一点，我将永远感激

我也有同样的需要。要解决此问题，请在this.update函数之后的代码中添加以下函数：

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

然后，在页面上，在滚动条的update（）调用之后添加对bottom（）的调用：

对我来说似乎很好

---

罗比我也有同样的需要。要解决此问题，请在this.update函数之后的代码中添加以下函数：

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

然后，在页面上，在滚动条的update（）调用之后添加对bottom（）的调用：

对我来说似乎很好

---

Robby

您还可以使用本机jQuery动画功能实现平滑的自动滚动。而且不需要修改原来的小滚动条脚本

//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);
});

---

您还可以使用原生jQuery动画功能来实现平滑的自动滚动。而且不需要修改原来的小滚动条脚本

//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);
});

---

根据文档，您可以通过调用{$（element）向下触发滚动条底部。tinyscrollbar_update（'bottom'）}

根据文档，您可以通过调用{$（element）向下触发滚动条底部。tinyscrollbar_update（'bottom'）}

tinyscrollbar中现在有了一个标准方法。tinyscrollbar中现在有了一个标准方法。