iOS8 webkit-overflow-scrolling：触摸覆盖答案

【问题标题】：iOS8 webkit-overflow-scrolling:touch with overlayiOS8 webkit-overflow-scrolling：触摸覆盖
【发布时间】：2015-03-12 03:48:37
【问题描述】：

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

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

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

这里是问题示例的链接。如果在 iOS 7 上运行，它会按预期运行，如果在 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 属性设置为隐藏/自动，但这会增加可怕的闪烁。

任何建议将不胜感激。

谢谢。

【问题讨论】：

标签： ios8 webkit scroll overlay gesture

【解决方案1】：

我认为仅在当前的 safari/webkit 版本的 iOS8 中使用 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

【讨论】：

你好 Jan，这个解决方案对我不起作用，因为这会阻止设备获取 pan 事件（我也在本机听那些）。
嘿@SergioM，我添加了另一个解决方案。也许这对你更有效。
嗨 Jan，谢谢，但我已经尝试过了。当应用溢出隐藏时，可滚动区域闪烁，如原始问题所述。

【解决方案2】：

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

我在叠加层中添加了一个垂直方向大 1% 的 div。现在保证事件由覆盖层处理，而不是传递到后面的容器。这也让我能够原生地收听事件，例如平移（水平），垂直的不会出现，但现在还可以。

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

这里是fiddle的链接。边距是不必要的，只是为了避免数字重叠。

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

【讨论】：