2014/12/26

[Zepto.js][JavaScript]animateしながらスクロール

昨日のエントリーでZepto.jsはanimateメソッドを使ってスクロールすることはできないことを書きましたが、animateメソッドを使わずにアニメーションさせる方法がありました。

function scroll(selector, animate, viewOffset) {
    $('body').scrollToBottom (600, '800');
}

$('#trigger').click(function(e) {
   e.preventDefault();
   scroll( $('#element'), true, 30 );
});
$.fn.scrollToBottom = function(scrollHeight ,duration) {
    var $el = this;
    var el  = $el[0];
    var startPosition = el.scrollTop;
    var delta = scrollHeight  - 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();
};
この処理、プラグインにしてgitにアップしてなー。 著者にコンタクトとりたいんだけど、twitterのアカウントが見当たらないんだよね。 困った。 参考URL Extend Zepto.js with a jQuery method? scrollTop()

0 コメント:

コメントを投稿