4

現在のプロジェクトで Zepto.js を使用しています。scrollTop()Zepto は、jQuery に含まれるメソッドをサポートしていません。

Zepto を拡張して使用することは可能scrollTop()ですか?

更新:私が望むのは、以前に jQuery で使用したような、小さくて単純な「アニメーション スクロール」関数を独自に作成することだけです。ここで実際の例を参照してください。scrollTop()ただし、Zepto.js で使用できる関数を使用せずに同じ関数を機能させる方法がわかりません。

4

6 に答える 6

6

scrollTop.animateCSS トランジションを使用するため、Zepto の方法を使用してアニメーション化することはできません。

次のようなものを試してください: http://jsfiddle.net/DVDLM/5/

function scroll(scrollTo, time) {
    var scrollFrom = parseInt(document.body.scrollTop),
        i = 0,
        runEvery = 5; // run every 5ms

    scrollTo = parseInt(scrollTo);
    time /= runEvery;

    var interval = setInterval(function () {
        i++;

        document.body.scrollTop = (scrollTo - scrollFrom) / time * i + scrollFrom;

        if (i >= time) {
            clearInterval(interval);
        }
    }, runEvery);
}

$('#trigger').click(function () {
    scroll('600px', 500);
});

編集:runEvery間隔を実行する頻度を指定する変数を追加しました。これが低いほど、アニメーションはスムーズになりますが、パフォーマンスに影響を与える可能性があります。

EDIT2：質問を読み間違えたと思います。新しい質問への答えは次のとおりです。

$.zepto.scrollTop = function (pixels) {
    this[0].scrollTop = pixels;
};
于 2012-09-01T16:18:18.187 に答える
5

誰にも仕事をさせたくないので、ここに短い答えがあります jQueryからZeptoへの移植

于 2012-09-01T16:00:14.773 に答える
1

DOMネイティブのscrollTopプロパティを使用します。

$（'＃el'）[0] .scrollTop = 0;

于 2012-08-30T15:56:59.723 に答える
0

答えは簡単です。Zepto はタイムアウト スタイルのアニメーションを使用せず、css3 を使用するため、スクロール機能の基本的な実装を次に示します。

HTML: アニメーション スクロール Hello You </p>

CSS: #page { 高さ:5000px; 位置:相対; } #要素 { 位置:絶対; トップ:600px }

JS:

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();
};
​
于 2012-09-01T20:46:55.303 に答える
0

Zeptos のバージョン 1.0 が scrollTop() をサポートするようになったことに注意してください。ドキュメントを参照してください: http://zeptojs.com/#scrollTop

于 2013-05-13T02:46:43.373 に答える