iOS8 webkit-overflow-scrolling :touch with overlay

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 属性设置为隐藏/自动，但这会增加可怕的闪烁。

任何建议将不胜感激。

谢谢。

Answer 1

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

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

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

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

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