iOS8 webkit-overflow-scrolling: касание с наложением

В настоящее время у меня есть приложение с UIWebView, в котором есть прокручиваемый div со свойством webkit-overflow-scrolling:touch. Когда боковое меню открыто, я помещаю наложение (еще один элемент 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/

Я также попытался установить для свойства overflow-x прокручиваемого элемента div значение hidden/auto, когда меню открыто, но это добавляет ужасное мерцание.

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

Спасибо.


scroll overlay gesture webkit ios8
person SergioM    schedule 14.01.2015    source источник

Ответы (2)


arrow_upward
5
arrow_downward

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

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

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

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

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

person SergioM    schedule 11.05.2015

arrow_upward
0
arrow_downward

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

Но вы должны иметь возможность предотвратить прокрутку с помощью 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

person Jan    schedule 09.05.2015
comment
Здравствуйте, Ян, это решение не работает для меня, так как это помешает устройству получать события панорамирования (я также слушаю их изначально). - person SergioM; 11.05.2015
comment
Привет @SergioM, я добавил еще одно решение. Может быть, это работает лучше для вас. - person Jan; 11.05.2015
comment
Эй, Ян, спасибо, но я уже пробовал это. При применении скрытого переполнения прокручиваемая область мерцает, как указано в исходном вопросе. - person SergioM; 11.05.2015