Zepto.js로 div를 스크롤하는 방법은 무엇입니까?

Question

overflow:scroll으로 div가 있는데 이제 프로그래밍 방식으로 해당 div를 스크롤하려고합니다. Zepto.js로 가능합니까?

Answer 1

API는 Zepto에서 직접 제공하지 않지만 하위 DOM에서는 액세스 할 수 있습니다.

var $el = $('#scrolling-el'); 
var el = $el[0]; /* Actual DOM element */ 

/* Scroll to bottom */ 
el.scrollTop = el.scrollHeight - $el.height(); 

/* Scroll to top */ 
el.scrollTop = 0; 

애니메이션 스크롤 setTimeout를 사용하는 과정이 될 것입니다. 빠른 Zepto 플러그인을 작성할 수 있습니다. 다음은 일반적인 예입니다.

$.fn.scrollToBottom = function(duration) { 
    var $el = this; 
    var el = $el[0]; 
    var startPosition = el.scrollTop; 
    var delta = el.scrollHeight - $el.height() - startPosition; 

    var startTime = Date.now(); 

    function scroll() { 
     var fraction = Math.min(1, (Date.now() - startTime)/duration); 

     el.scrollTop = delta * fraction + startPosition; 

     if(fraction < 1) { 
      setTimeout(scroll, 10); 
     } 
    } 
    scroll(); 
};