使用 jQuery 方法扩展 Zepto.js?滚动顶部()

Posted

技术标签:

【中文标题】使用 jQuery 方法扩展 Zepto.js?滚动顶部()【英文标题】:Extend Zepto.js with a jQuery method? scrollTop() 【发布时间】:2012-08-25 09:46:28 【问题描述】:

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

是否有可能扩展 Zepto 以与 scrollTop() 一起工作?

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

【问题讨论】:

【参考方案1】:

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;
;

【讨论】:

【参考方案2】:

不想让任何人工作,所以这里是简短的答案 Porting from jQuery to Zepto

【讨论】:

这里还有一个 (github.com/suprMax/ZeptoScroll) 虽然它不适用于 Firefox,但您可能需要改进它。 Zepto 的开发人员也正在开发它github.com/madrobby/zepto/issues/392【参考方案3】:

使用 DOM 原生的 scrollTop 属性:

$('#el')[0].scrollTop = 0;

【讨论】:

嗯,谢谢。但是我不知道该怎么做。看看这个……jsfiddle.net/DVDLM……这是我自己构建的一个 jQuery 函数。然而,在我目前的项目中,我使用的是 Zepto 而不是 jQuery。请参阅此jsfiddle.net/DVDLM/1,我仅将框架更改为 Zepto。知道如何使该功能与 Zepto 一起使用吗? 你的意思是可以使用 window.scrollTo(xpos, ypos) ...但它不会动画:( ...【参考方案4】:
(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);

【讨论】:

【参考方案5】:

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

html: 动画卷轴 你好你 ​

CSS: #page 高度:5000px;位置:相对; #element 位置:绝对;顶部:600 像素

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();
;
​

【讨论】:

【参考方案6】:

请注意,Zeptos 1.0 版现在支持 scrollTop()。请参阅文档: http://zeptojs.com/#scrollTop

【讨论】:

scrollTo() != scrollTop(). @mrgnou 是的,你的权利。我的意思是说“scrollTop()”。我正确链接到正确的函数,但在评论中遗漏了一个“p”。

以上是关于使用 jQuery 方法扩展 Zepto.js?滚动顶部()的主要内容,如果未能解决你的问题,请参考以下文章

zepto.js和jquery.js函数都差不多啊,zepto.js有啥优点呢?各位

学习zepto.js(Hello World)

Zepto.js

Zepto的使用

Jquery .js 能改成zepto.js 支持么?

Zepto.js 不返回假?