iOS8 webkit-overflow-scrolling：オーバーレイでのタッチ

Question

現在、webkit-overflow-scrolling：touchプロパティでスクロール可能なdivを持つUIWebViewのアプリがあります。 サイドメニューが開いているときに、コンテンツの上にオーバーレイ（別のdiv）を配置して、調光効果を与えます。

問題は、メニューが開いているときオーバーレイが起こってこのフォームを停止する必要があるとき（および場所でオーバーレイが）ときに、ユーザパンは、スクロール可能なdiv要素が実際にスクロールすることです。

今、iOS7では、解決策はwebkit-overflow-scroll：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/

私は、メニューを開いそれは恐ろしいちらつきを追加されたときに隠し/ autoにスクロール可能なdiv要素のオーバーフロー-xプロパティを設定してみました。

ご提案は大変ありがとうございます。

ありがとうございました。

Answer 1

まあ、多くの異なるオプションを試した後、私は、Wiを思いつきましたそれの周りの仕事は今のところ十分です。

垂直方向に1％大きくなるオーバーレイの内側にdivを追加しました。これで、イベントはオーバーレイによって処理され、背面のコンテナには渡されないことが保証されます。 これはまた、パン（水平）などのネイティブイベントを聞くこともできますが、垂直なものは現れませんが、それは今は大丈夫です。ここ

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

はfiddle.Theマージンへのリンクがちょうど重なるように番号を避けるために、不要です。それはパンのイベントを得ることから、デバイスを妨げるよう

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

Answer 2

私だけiOS8の現在のサファリ/ 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