Javascript顺畅滚动iPad

时间:2012-03-25 13:47:40

标签: javascript ipad safari

我使用此代码, 在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;
}   

}

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

4 个答案:

答案 0 :(得分:5)

将此添加到您的css:

-webkit-overflow-scrolling: touch;

兼容性

  • Safari: iOS 5

  • Android浏览器: 3.0

  • Blackberry浏览器: 6

  • Chrome for Mobile

  • Firefox Mobile

  • IE Mobile: 9

  • Opera Mobile

  

示例:JSfiddle

     

参考:barrow.io - Overflow scrolling

答案 1 :(得分:2)

答案 2 :(得分:1)

Smooth Div scroll现在支持触摸滚动。它是免费的,就像你描述的那样 - 在另一个div中滚动一个div,隐藏溢出。

答案 3 :(得分:1)

看起来和我试图做的相似......祝你好运

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


}