Переполнение скрытой проблемы с двойной прокруткой на iOS - PullRequest
Новая
       30

Переполнение скрытой проблемы с двойной прокруткой на iOS

0 голосов
/ 25 сентября 2018

Проблема в том, что у меня есть тело (которое не может быть исправлено, потому что оно вызывает ошибки в текущем проекте) с большим количеством контента и модалом с прокручиваемым контентом внутри, проблема в том, что на iOS, если япереключить переполнение на скрытое, ничего не происходит.

В моем случае установка height: 100vh и overflow: hidden на class="parent" не работает.

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

Я также искал скрытые альтернативы переполнения, но пока ничего не найдено ...

Если у вас, ребята, есть какие-то идеи /refs / способ ее решения опубликовать здесь я ценю, спасибо.

Вот фрагмент https://codepen.io/anon/pen/zJQoJR

<body class="modal-open">
    <div class="parent">
        <p>Body scrollable content</p>
        <div class="container-child">
            <div class="child">
                <p>Modal scrollable content</p>
            </div>
        </div>
    </div>
</body>

Ответы [ 2 ]

0 голосов
/ 01 октября 2018

Я получил довольно хорошие результаты, добавив это к вашему css: 

body.modal-open > .parent {
    position: fixed;
    overflow: hidden;
    height: 100%;
}

И чтобы сделать модальное «бодрое» на вашем устройстве iOS, измените ваш .container-child css на: 

.container-child {
    position: fixed;
    background-color: rgba(0,0,0,0.4);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    -webkit-overflow-scrolling: touch; /* <-- added */
}

Вот пример демонстрации кода: https://codepen.io/anon/pen/mzJXPJ

0 голосов
/ 25 сентября 2018

Может помочь скрытие переполнения в вашем HTML-теге: 

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden; 
}
...