작은 스크롤 막대를 사용하여 div의 하단으로 자동 스크롤

Question

나는 shoutbox를 코딩하고 가능한 한 사용자 친화적으로 만듭니다. jQuery에 Tiny Scrollbar plugin을 사용하고 있으며 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); 

, 나는 영원히 감사 할 것입니다 :

다음은 실제 작은 스크롤 코드입니다!

Answer 1

나는 이와 같은 필요를 가지고있었습니다. 이를 해결하기 위해 this.update 함수 뒤에 코드에 다음 함수를 추가합니다

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

그런 다음 페이지에서 (아래에 호출을 추가)하여 스크롤의 업데이트 후() 호출 :

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

나를 위해 잘 작동하는 것 같습니다.

로비

Answer 2

당신은 또한 부드러운 자동 스크롤을 달성하기 위해 기능을 애니메이션을 기본 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); 
}); 

Answer 3

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

Answer 4

워드 프로세서에 따르면 당신이 호출하여 스크롤 막대의 아래쪽으로 해고 할 수 {$ (요소) .tinyscrollbar_update ('바닥')}