4

我在当前项目中使用 Zepto.js。Zepto 不支持scrollTop()jQuery 在其中的方法。

是否可以扩展 Zepto 以使其也可以使用scrollTop()？

更新：我想要的只是创建我自己的小而简单的“动画滚动”功能，就像我以前在 jQuery 中使用的那样。请参阅此处的工作示例。scrollTop()但是，如果没有Zepto.js 中可用的功能，我不知道如何使相同的功能工作。

4

6 回答 6

6

scrollTop使用 Zepto 的.animate方法无法设置动画，因为它使用 CSS 过渡。

尝试这样的事情：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 回答
1 
(function ($) {

    ['width', 'height'].forEach(function(dimension) {
        var offset, Dimension = dimension.replace(/./, function(m) { return m[0].toUpperCase() });
        $.fn['outer' + Dimension] = function(margin) {
            var elem = this;
            if (elem) {
                var size = elem[dimension]();
                var sides = {'width': ['left', 'right'], 'height': ['top', 'bottom']};
                sides[dimension].forEach(function(side) {
                    if (margin) size += parseInt(elem.css('margin-' + side), 10);
                });
                return size;
            }
            else {
                return null;
            }
        };
    });

    ["Left", "Top"].forEach(function(name, i) {
        var method = "scroll" + name;

        function isWindow( obj ) {
            return obj && typeof obj === "object" && "setInterval" in obj;
        }

        function getWindow( elem ) {
            return isWindow( elem ) ? elem : elem.nodeType === 9 ? elem.defaultView || elem.parentWindow : false;
        }

        $.fn[method] = function( val ) {
            var elem, win;
            if (val === undefined) {
                elem = this[0];
                if (!elem) {
                    return null;
                }
                win = getWindow(elem);
                // Return the scroll offset
                return win ? ("pageXOffset" in win) ? win[i ? "pageYOffset" : "pageXOffset"] :
                    win.document.documentElement[method] ||
                    win.document.body[method] :
                    elem[method];
            }

            // Set the scroll offset
            this.each(function() {
                win = getWindow(this);
                if (win) {
                    var xCoord = !i ? val : $(win).scrollLeft();
                    var yCoord = i ? val : $(win).scrollTop();
                    win.scrollTo(xCoord, yCoord);
                }
                else {
                    this[method] = val;
                }
            });
        }
    });

})(Zepto);
于 2012-09-10T10:18:22.503 回答
0

答案很简单，Zepto 不使用超时样式动画，它使用 css3，所以这里是滚动功能的基本实现：

HTML：动画滚动 Hello You ​</p>

CSS：#page { 高度：5000px; 位置：相对；} #element { 位置：绝对；顶部：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 回答