iOS8 webkit-overflow-scrolling:touch with overlay

Question

我目前有一个带有 UIWebView 的应用程序，它有一个可滚动的 div 和 webkit-overflow-scrolling:touch 属性。当侧边菜单打开时，我在内容之上放置了一个叠加层（另一个 div）以提供调暗效果。

问题是，当用户平移菜单打开（并且覆盖就位）时，可滚动 div 实际上在覆盖应该停止这种形式发生时滚动。

现在，在 iOS7 中，解决方案是添加 webkit-overflow-scrolling:touch;到叠加层。这就像一个魅力，但在 iOS8 中却没有。

这里有一个link问题的例子。如果运行 on iOS 7 它按预期工作，如果运行 on iOS 8 后面的内容将滚动。

.scrollable {
    width:100%;
    height:200px;
    -webkit-overflow-scrolling:touch;
    overflow:scroll;
}

.overlay {    
    position:absolute;
    width:100%;
    overflow:scroll;
    height:200px;
    -webkit-overflow-scrolling:touch;
    background-color:black;
    opacity:.5;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0); 
    z-index:10;
}

https://jsfiddle.net/SergioM/57f2da87/9/

我还尝试在打开菜单时将可滚动 div 的 overflow-x 属性设置为 hidden/auto，但这增加了可怕的闪烁。

任何建议将不胜感激。

谢谢。

Answer 1

我认为仅在 iOS8 的当前 safari/webkit-version 中使用 css 是不可能的。

但是您应该可以使用 javascript 来防止滚动。

$( ".showHide" ).click( function() {
    $( ".overlay" ).toggle();
});

$( ".overlay" ).on( 'touchstart touchmove', function( event ) {
    if ( $( this ).is( ":visible" ) ) {
        event.preventDefault();
    }
});

更新：

我试了一下，想出了另一个可能对你有帮助的解决方案。

HTML:

<button class="showHide">show/hide overlay</button>
<br/>
<br/>
<div class="scrollable">
    <div class="overlay"></div>
    1
    <br/>2
    <br/>3
    <br/>4
    <br/>5
    <br/>6
    <br/>7
    <br/>8
    <br/>9
    <br/>10
    <br/>11
    <br/>12
    <br/>13
    <br/>14
    <br/>15
    <br/>16
    <br/>17
</div>

CSS:

.scrollable {
    width:100%;
    height:200px;
    -webkit-overflow-scrolling:touch;
    overflow:scroll;
    position: relative
}
.overlay {
    content: ' ';
    position:absolute;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    background-color:black;
    opacity:.5;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0); 
    transition: opacity 300ms ease;
    z-index:10;
}

Javascript:

$( ".showHide" ).click( function () {
    $( ".overlay" ).toggle( { duration: 0, complete: function() {
        if ( $( ".overlay" ).is( ":visible" ) ) {
            $( ".overlay" ).css( 'top', $( ".scrollable" ).scrollTop() );
            $( ".scrollable" ).css( 'overflow', 'hidden' );
        } else {
            $( ".scrollable" ).css( 'overflow', 'scroll' );
        }
    }});
});

示例：JSFiddle

Answer 2

好吧，在尝试了许多不同的选择之后，我想出了一个目前已经足够好的解决方法。

我在叠加层内添加了一个 div，它在垂直方向上大了 1%。现在保证事件由覆盖层处理，而不是传递给后面的容器。这也让我可以在本地收听事件，例如平移（水平），垂直事件不会出现，但现在没问题。

.overlayInner {
    color:red;
    height:101%;
    margin-left:30px;
}

这里有一个link到fiddle.The的边距是不必要的，只是为了避免数字重叠。

http://jsfiddle.net/SergioM/57f2da87/15/

iOS8 webkit-overflow-scrolling:touch with overlay

iOS8 webkit-overflow-scrolling:touch with overlay

ios8

webkit

scroll

overlay

gesture