Прокрутка зависает во всплывающем окне, если область за пределами компонента прокрутки была затронута на мобильном телефоне

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

У меня есть проблема с этим решением на мобильном телефоне (я тестирую его на iPhone 6 в Safari).

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

Я использую следующий код на странице:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>

<style>

    html {
        height: 100%;
        width: 100%;
        overflow: hidden;
        min-width: 100%;
        min-height: 100%;
    }

    body {
        font-family: '.SFNSDisplay-Regular', -apple-system, Helvetica, Arial, sans-serif;
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
        font-size: 14px;
        background-color: gray;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        overflow: hidden;

    }

    .main-container {
        border: 1px solid red;
        margin: 20px;
    }

    .block {
        border: 1px solid green;
        height: 100px;
        margin: 20px;
    }

    .btn {
        margin: 20px;
        border: 1px solid blue;
    }

    .hidden {
        display: none;
    }

    .popup-container {
        position: fixed;
        overflow: scroll;
        width: 100vw;
        height: 100vh;
        top: 0px;
        left: 0px;
        z-index: 20;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .popup-content {
        background-color: white;
        width: 50vw;
        height: 500px;
        margin: 100px auto 0;
        overflow-y: scroll;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #container {
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        height: 100%;
    }

    #container.fixed {
        overflow-y: hidden;;
        position: fixed;
        border: 1px solid pink;
        -webkit-overflow-scrolling: auto;
        min-width: calc(100% - 60px);
    }

</style>

</head>
<body>

<div class="main-container hidden" id="container">
    <div class="block" onclick="showPopup()">1</div>
    <div class="block" onclick="showPopup()">2</div>
    <div class="block" onclick="showPopup()">3</div>
    <div class="block" onclick="showPopup()">4</div>
    <div class="block" onclick="showPopup()">5</div>
    <div class="block" onclick="showPopup()">6</div>
    <div class="block" onclick="showPopup()">7</div>
    <div class="block" onclick="showPopup()">8</div>
    <div class="block" onclick="showPopup()">9</div>
    <div class="block" onclick="showPopup()">10</div>
    <div class="block" onclick="showPopup()">11</div>
    <div class="block" onclick="showPopup()">12</div>
    <div class="block" onclick="showPopup()">13</div>
    <div class="block" onclick="showPopup()">14</div>
    <div class="block" onclick="showPopup()">15</div>
</div>

<div class="popup-container hidden">
    <div class="popup-content">
        <div class="header" onclick="showPopup()">Close popup</div>
        <div class="body">
            <div class="block">in popup 1</div>
            <div class="block">in popup 2</div>
            <div class="block">in popup 3</div>
            <div class="block">in popup 4</div>
            <div class="block">in popup 5</div>
            <div class="block">in popup 6</div>
            <div class="block">in popup 7</div>
            <div class="block">in popup 8</div>
            <div class="block">in popup 9</div>
        </div>
    </div>
</div>

<script
    src="https://code.jquery.com/jquery-3.1.1.js"
    integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
    crossorigin="anonymous"></script>

<script>

var scrollhelper = {
    addFixedClassToContainer: function () {
        $('#container').addClass('fixed');
    },
    removeFixedClassToContainer: function () {
        $('#container').removeClass('fixed');
    }
};

function showPopup() {
    $('.popup-container').toggleClass('hidden');

    if ($('.popup-container').hasClass('hidden')) {
        scrollhelper.removeFixedClassToContainer();
    } else {
        scrollhelper.addFixedClassToContainer();
    }
}

$(document).ready(function () {
    $('#container').removeClass('hidden');
});
</script>

</body>
</html>

Вот ссылка на код в codepen: http://codepen.io/annmirosh/pen/MJeaqO .

Это рабочий пример: https://sw22.firebaseapp.com

Я буду признателен за любые идеи, как исправить эту проблему с замораживанием прокрутки!

Спасибо!

1 ответ

  1. Эта проблема возникнет, если ваш сайт не реагирует и прокрутка влево и вправо, я имею в виду, если ваша веб-страница имеет прокрутку внизу, то эта проблема возникнет.

    Однако если тело раздела HTML имеет css overflow: hidden, то он не будет прокручиваться. http://codepen.io/annmirosh/debug/MJeaqOэта ссылка не работает.

    Кроме того, у меня есть проверить мой собственный веб-сайт у модального всплывающего окна есть также прокрутки справа не не трогают с любого другого пространства.

    если пользователь касается области за пределами всплывающего окна (если бы был css на теле переполнения Скрытый пользователь никогда не получит область за пределами всплывающего окна, так как слой обратно всплывающее окно получает позиционирование абсолютного или фиксированного с увеличенным свойством css z-индекса).

    Вот правильное решение: http://stackoverflow.com/questions/9538868/prevent-body-from-scrolling-when-a-modal-is-opened