iOS8 webkit-overflow-scrolling: touch with overlay

Question

В настоящее время у меня есть приложение с UIWebView с прокручиваемым div с функцией webkit-overflow-scrolling: touch. Когда боковое меню открыто, я помещаю надпись (другой div) поверх содержимого, чтобы получить эффект затемнения.

Проблема заключается в том, что когда меню открыто (и наложение на месте), когда пользователь работает, прокручиваемый div фактически прокручивается, когда оверлей должен останавливать эту форму.

Теперь, в iOS7, решение заключалось в том, чтобы добавить прокрутку webkit-overflow: 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/

Я также попытался установить переполнение-й свойство прокрутки дел до скрытого/авто, когда меню открыто, но это добавляет страшное мерцание.

Любое предложение будет высоко оценено.

Спасибо.

Answer 1

Ну после попытки много различных вариантов, я пришел Wi Это хорошо работает.

Я добавил div внутри наложения, который вертикально на 1% больше. Это теперь гарантирует, что событие обрабатывается наложением и не передается контейнеру сзади. Это также позволяет прослушивать события изначально, такие как панорамирование (по горизонтали), вертикальные не подходят, но это нормально.

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

вот ссылка на скрипку. Край не нужен, чтобы избежать совпадения числа.

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

Answer 2

Я не думаю, что это возможно только с использованием css в текущей версии Safari/webkit-версии iOS8.

Но вы должны быть в состоянии предотвратить прокрутку с помощью javascript.

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

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

Update:

я играл немного вокруг и придумал другое возможное решение, которое может быть полезным для вас.

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