scroll - Zepto.js で div をスクロールするにはどうすればよいですか?

Question

div がoverflow:scrollあり、その 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();
};