IOS8 webkit-overflow-scroll: touch with overlay

Question

I currently have an application with UIWebView that has a scrollable div with the webkit-overflow-scrolling: touch property. When the side menu is open, I put an inscription (another div) on top of the content to get a dimming effect.

The problem is that when the menu is open (and the overlay is in place), when the user is working, the scrollable div actually scrolls when the overlay should stop this form.

Now, in iOS7, the solution was to add a webkit-overflow scroll: touch; to overlay. It works like a charm, but in iOS8 it is not.

Here is a link to an example problem. If it is running on iOS 7, it works as expected if content on the back scrolls on 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/

I also tried setting the overflow-x property of the scrollable div to hidden / auto when opening the menu, but this adds a terrible flicker.

Any suggestion would be highly appreciated.

Thanks.

Answer 1

Well, having tried many different options, I came up with a job that is good enough now.

I added a div inside the overlay, which is vertically 1% larger. This now ensures that the event is handled by the overlay and is not passed to the container from behind. It also allows me to listen to events initially, such as panning (horizontally), vertical ones will not appear, but this is normal.

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

here is the link to the violin. The edge is not needed, just to avoid a coincidence of the number.

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

Answer 2

I do not think this is possible only using css in the current version of Safari / webkit version of iOS8.

But you should be able to prevent scrolling with javascript.

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

Update:

I played a little and came up with another possible solution that could help you.

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

Example: JSFiddle