Question

我目前有一个带有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属性设置为hidden / auto，但这会增加可怕的闪烁。

任何建议都将不胜感激。

感谢。

Answer 1

在尝试了很多不同的选择后，我想出了一个现在已经足够好的工作了。

我在叠加层中添加了一个垂直1％的div。现在可以保证事件由叠加层处理，而不是传递给后面的容器。这也允许我本地收听事件，如pan（水平），垂直事件不会出现，但现在还可以。

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

这里是一个小提琴的链接。边距是不必要的，只是为了避免数字重叠。

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

Answer 2

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

iOS8 webkit-overflow-scrolling：触摸叠加

2 个答案: