javascript - 仅针对 html 禁用 flex 滚动，但针对溢出 :scroll 的元素进行维护

Question

我正在创建一个全屏网络应用程序，它将包含一些使用新的 iOS 5 溢出:滚动功能的模块/小部件。我想要的是在滚动 html/body 时禁用那种“flex ”效果(因为它是全屏)，但只在可滚动元素上保持这种效果。

平滑我拥有的可滚动元素的效果:

html, body { overflow: hidden; }

.scrollable {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

然后是以下禁用触摸滚动效果的脚本:

$(document).bind('touchmove', function (e) { 
    if (e.target === document.documentElement) {
        e.preventDefault(); 
    }
});

虽然这似乎根本不起作用，因为当将元素滚动到最底部或顶部时，它也会滚动 documentElement。

有没有办法只对 body html 元素禁用该效果？

这是一个很好的例子，说明这如何影响功能:

http://dl.dropbox.com/u/1928164/ios5/index.html

Answer 1

不幸的是-webkit-overflow-scrolling没有更好地处理这个。您需要跟踪 y使其工作的位置。我把课 scroll在我想在页面上滚动的任何内容上，例如 <ul>元素。包装一个 <div> <ul>周围用 overflow-y: auto 填充视口(viewport).不要放 overflow或 height在 <ul> 上. <ul>将扩展到它的内容一样高，它是 <div>这实际上是在做滚动。 -webkit-overflow-scrolling是继承的，因此请尽可能将其放在 DOM 中。

演示:http://jsfiddle.net/ThinkingStiff/FDqH7/

脚本:

var swipeY = 0;

function onTouchMove( event ) {

    var scroll = event.target.closestByClassName( 'scroll' );

    if ( scroll ) {

        var top = scroll.positionTop - scroll.parentNode.positionTop,
            heightDifference = ( 0 - scroll.offsetHeight + scroll.parentNode.offsetHeight );

        if( ( top >= 0 ) && ( event.touches[0].screenY > swipeY ) ) { 
            event.preventDefault(); //at top, swiping down
        } else if( ( top <= heightDifference ) && ( event.touches[0].screenY < swipeY ) ) { 
            event.preventDefault(); //at bottom, swiping up
        };

    } else {
        event.preventDefault();
    };

};

function onTouchStart( event ) {

    swipeY = event.touches[0].screenY;

};

Element.prototype.closestByClassName = function ( className ) {

    return this.className && this.className.split( ' ' ).indexOf( className ) > -1
        ? this
        : ( this.parentNode.closestByClassName && this.parentNode.closestByClassName( className ) );

};

window.Object.defineProperty( Element.prototype, 'positionTop', {

    get: function () { 
        return this.offsetTop - this.parentNode.scrollTop;
    }

} );

document.getElementById( 'viewport' ).addEventListener( 'touchmove', onTouchMove, false );
document.getElementById( 'viewport' ).addEventListener( 'touchstart', onTouchStart, false );

HTML:

<div id="viewport">
<div id="scroll-view">
    <ul class="scroll">
        <li>scroll scroll scroll scroll scroll </li>
        <li>scroll scroll scroll scroll scroll </li>
        <li>scroll scroll scroll scroll scroll </li>

        . . .

    </ul>
</div>
</div>

CSS:

#viewport {
    border: 1px solid black;
    height: 460px;
    width: 320px;
    -webkit-overflow-scrolling: touch;
}

#scroll-view {
    height: 100%;
    overflow-y: auto;
    width: 100%;
}