iOS8 Webkit-Überlauf-Scrolling: Touch mit Overlay

Question

Ich habe derzeit eine Anwendung mit UIWebView, die eine scrollbare div mit der Webkit-Überlauf-scrolling: Touch-Eigenschaft hat. Wenn das Seitenmenü geöffnet ist, platziere ich ein Overlay (ein anderes Div) über dem Inhalt, um einen Dimm-Effekt zu erzielen.

Das Problem ist, dass, wenn das Menü geöffnet ist (und die Überlagerung an Ort und Stelle), wenn der Benutzer schwenkt, das scrollbare Div tatsächlich scrollt, wenn das Overlay sollte dieses Formular zu stoppen.

Nun, in iOS7, war die Lösung, die Webkit-Überlauf-Scrolling hinzuzufügen: touch; zu der Überlagerung. Das funktioniert wie ein Zauber, aber in iOS8 tut es das nicht.

Hier ist ein Link zu einem Beispiel für das Problem. Wenn es auf iOS 7 läuft, funktioniert es wie erwartet, wenn es auf iOS 8 ausgeführt wird, wird der Inhalt auf der Rückseite scrollen.

.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/

Ich habe auch versucht, um versteckte/Auto den Überlauf-x Eigenschaft des scrollbaren div Einstellung, wenn das Menü geöffnet wird, aber das fügt eine schreckliche Flimmern.

Jeder Vorschlag wird sehr geschätzt.

Danke.

Answer 1

Nun, nachdem viele verschiedene Möglichkeiten versucht, ich kam wi th eine Arbeit um das ist gut genug für jetzt.

Ich habe ein Div in das Overlay hinzugefügt, das vertikal 1% größer ist. Das garantiert jetzt, dass das Ereignis durch das Overlay behandelt und nicht an den Container auf der Rückseite weitergegeben wird. Dies erlaubt mir auch, Ereignisse nativ zu hören, wie Pan (horizontal), die vertikalen werden nicht auftauchen, aber das ist jetzt ok.

Hier ist ein Link zur Geige. Der Rand ist unnötig, nur um zu vermeiden, dass sich die Zahl überschneidet.

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

Answer 2

ich denke nicht, dass dies möglich ist, indem nur CSS in der aktuellen Safari/Webkit-Version von iOS8 verwendet wird.

Aber Sie sollten in der Lage sein, das Scrollen mit Javascript zu verhindern.

$(".showHide").click(function() { 
    $(".overlay").toggle(); 
}); 

$(".overlay").on('touchstart touchmove', function(event) { 
    if ($(this).is(":visible")) { 
     event.preventDefault(); 
    } 
}); 

Update:

i spielte ein wenig um und kam mit einer weiteren möglichen Lösung, die für Sie nützlich sein könnten.

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'); 
     } 
    }}); 
}); 

Beispiel: JSFiddle