用jQuery方法扩展Zepto.js?scrollTop()
Extend Zepto.js with a jQuery method? scrollTop()
我在当前项目中使用Zepto.js。Zepto不支持jQuery中的scrollTop()
方法。
是否有可能将Zepto扩展到与scrollTop()
一起工作?
更新:我只想创建我自己的小而简单的"动画滚动"功能,就像我以前在jQuery中使用的一样。请参阅此处的工作示例。然而,如果没有Zepto.js中可用的scrollTop()
函数,我不知道如何使相同的函数工作。
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);
});
EDIT:我添加了一个runEvery
变量,它指定间隔应该运行的频率。此值越低,动画就越平滑,但可能会影响性能。
第二版:我想我看错了这个问题。以下是新问题的答案:
$.zepto.scrollTop = function (pixels) {
this[0].scrollTop = pixels;
};
不想让任何人都不工作,下面是简短的答案从jQuery移植到Zepto
使用DOM本机scrollTop属性:
$('#el')[0]。scrollTop=0;
(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);
答案很简单,Zepto不使用超时风格的动画,它使用css3,所以这里有一个滚动功能的基本实现:
HTML:动画滚动你好你
CSS:#页面{高度: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();
};
请注意,Zeptos的1.0版本现在支持scrollTop()。请参阅文档:http://zeptojs.com/#scrollTop
相关文章:
- 可以't让我的if语句处理js中的html表单输入
- 使用agility.js进行页面布局和合成
- 使用Clipboard.js复制span文本
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 强制模板刷新ember.js
- 如何编写HTML输入的JS内联
- Angular JS IE9 Hashbang url rewriting
- 使用JS将数组转换为json对象
- Node.js v6.2.0类扩展不是函数错误
- 当js函数's已执行
- 要求未定义JS回调参数
- 在自定义mean.io包中使用angular-chart.js作为依赖项
- 无法在数据endVal中设置值=“”;{{ucount}}”;使用Angular JS的CountUp
- 如何从Java/scala调用js美化程序
- 如何更改<svg>标记为<img>用js标记
- 用jQuery方法扩展Zepto.js?scrollTop()
- 当scrollTop时触发JS/jQuery动作
- 将jquery转换为prototype.js用于scrollTop,在向下滚动时等效更改为header
- 在编写滚动函数scrollTop时,如何确定滚动主体或html使用vinilla.js
- android 3.0:JS scrollTop不适用于chrome/webview