Javascript平滑滚动iPad

sho*_*hox 5 javascript safari ipad

我使用此代码来滚动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;
}   

}
Run Code Online (Sandbox Code Playgroud)

代码源:http : //www.flexmls.com/developers/2011/04/13/ipad-and-single-finger-scrolling-in-flexmls/

小智 6

将此添加到您的CSS:

-webkit-overflow-scrolling: touch;
Run Code Online (Sandbox Code Playgroud)

兼容性

  • Safari: iOS 5

  • Android浏览器: 3.0

  • 黑莓浏览器: 6

  • Chrome移动版

  • 火狐浏览器

  • IE手机: 9

  • Opera Mobile

例如:JSfiddle

参考:barrow.io-溢出滚动


and*_*aer 2

看看这个: http: //cubiq.org/iscroll-4