Расширить Zepto.js с помощью метода jQuery? scrollTop()

Question

Я использую Zepto.js в текущем проекте. Zepto не поддерживает метод scrollTop(), который имеет в нем jQuery.

Возможно ли продлить Zepto для работы с scrollTop()?

Обновление: Все, что я хочу, это создать мою собственную небольшую и простую «анимированную прокрутку», как я уже использовал с jQuery. См. Рабочий пример here. Однако я не знаю, как сделать эту работу без функции scrollTop(), доступной в Zepto.js.

Answer 1

не хотят стали никому работы, так вот короткий ответ Porting from jQuery to Zepto

Answer 2

Использование DOM родной scrollTop свойство:

$ ('# эль') [0] .scrollTop = 0;

Answer 3

scrollTop не является анимируемым с использованием метода .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); 
}); 

EDIT: Я добавил runEvery переменную, которая определяет, как часто интервал должен быть побежал. Чем ниже это, тем плавнее будет анимация, но это может повлиять на производительность.

EDIT2: Я думаю, что неправильно понял вопрос. Вот ответ на новый вопрос:

$.zepto.scrollTop = function (pixels) { 
    this[0].scrollTop = pixels; 
}; 

Answer 4

Ответ прост, Zepto доза не использовать стиль тайм-аут анимации, он использует CSS3, так что здесь основной реализацию функции прокрутки:

HTML: Animated Scroll Здравствуйте Вы

CSS: #page {высота: 5000px; позиция: относительная; } #element {position: absolute; топ: 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(); 
}; 
​ 

Answer 5

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

Answer 6

Обратите внимание, что версия 1.0 Zeptos теперь поддерживает scrollTop(). См. Документация: http://zeptojs.com/#scrollTop