使用Tiny Scrollbar自动滚动到div的底部
我正在编写一个shoutbox并使其尽可能用户友好。 它使用了JQuery的Tiny Scrollbar插件 ，我想要包含一个额外的function，这将允许我进入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)){ 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);
如果你可以修改它来做到这一点，我将永远感激不尽！
$('.overview:first').css({top: (($('.overview:first').height() - $('.viewport:first').height()) * (-1)) }); $('.thumb:first').css({top: $('.track:first').height() - $('.thumb:first').height()});
您还可以使用本机jQuery animate函数来实现平滑的自动滚动。 并且无需更改原始的小滚动条脚本。
//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); });
我有同样的需要。 要解决此问题，请在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（）的调用：
scrollBar.update(); scrollBar.bottom();
似乎对我来说很好。
罗比
根据文档，您可以通过调用{$（element）.tinyscrollbar_update（’bottom’）}来触发滚动条的底部。