[英]Javascript smooth scroll iPad
i use this code, to scroll overflow div (hidden) in ipad , and works expect its not smooth , is there any way i can make it smooth scroll ? 我使用这个代码,在ipad中滚动溢出div(隐藏),并且工作期望它不流畅,有什么方法可以让它顺利滚动?
function initMobileScroll(ele) {
var mobileScrollArea = document.getElementById(ele);
mobileScrollArea.addEventListener('touchstart', function(event){
touchstart (event);
});
mobileScrollArea.addEventListener('touchmove', function(event){
touchmove (event);
});
// let’s set the starting point when someone first touches
function touchstart (e) {
startY = e.touches[0].pageY;
startX = e.touches[0].pageX;
}
// calls repeatedly while the user’s finger is moving
function touchmove(e) {
var touches = e.touches[0];
// override the touch event’s normal functionality
e.preventDefault();
// y-axis
var touchMovedY = startY - touches.pageY;
startY = touches.pageY; // reset startY for the next call
mobileScrollArea.scrollTop = mobileScrollArea.scrollTop + touchMovedY;
// x-axis
var touchMovedX = startX - touches.pageX;
startX = touches.pageX; // reset startX for the next call
mobileScrollArea.scrollLeft = mobileScrollArea.scrollLeft + touchMovedX;
}
}
code source : http://www.flexmls.com/developers/2011/04/13/ipad-and-single-finger-scrolling-in-flexmls/ 代码来源: http : //www.flexmls.com/developers/2011/04/13/ipad-and-single-finger-scrolling-in-flexmls/
add this to your css: 将此添加到您的CSS:
-webkit-overflow-scrolling: touch;
Safari: iOS 5 Safari: iOS 5
Android Browser: 3.0 Android浏览器: 3.0
Blackberry Browser: 6 黑莓浏览器: 6
Chrome for Mobile Chrome for Mobile
Firefox Mobile Firefox Mobile
IE Mobile: 9 IE Mobile: 9
Opera Mobile Opera Mobile
example: JSfiddle
例如: JSfiddle
reference: barrow.io - Overflow scrolling
参考: barrow.io - 溢出滚动
看看这个: http : //cubiq.org/iscroll-4
Smooth Div scroll now supports touch scrolling. Smooth Div滚动现在支持触摸滚动。 It's free and works just like you describe - scrolls a div inside another div with overflow hidden.
它是免费的,就像你描述的那样工作 - 在另一个div中滚动一个div,隐藏溢出。
Looks similar to what I was trying to do.. Good luck 看起来类似于我想要做的事情。祝你好运
if (evt.type == "touchstart")
{
tsStartY = evt.originalEvent.changedTouches[0].clientY;
}
if (evt.type == "touchend")
{
var te = evt.originalEvent.changedTouches[0].clientY;
var delta = tsStartY - te;
if (tsStartY > te) {
// going down
this.transY += delta;
if (this.transY > this.minY)
{
this.transY = this.minY;
}
}
if (tsStartY < te)
{
// going up
this.transY -= -delta;
if (this.transY < this.maxY) {
this.transY = this.maxY;
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.