iOS8webkit-overflow-scrolling:触摸叠加

我目前有一个带有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,但这会增加可怕的闪烁.

任何建议将不胜感激.

谢谢.

在尝试了许多不同的选项后,我想出了一个现在已经足够好的工作了.

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

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

这里是小提琴的链接.边距是不必要的,只是为了避免数字重叠.

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