Scroll freezes in popup if area outside of the scroll component was touched on the mobile

Question

I have a page that contains 2 scrollable lists: one in the body and the second in the popup. I use standard solution for preventing scrolling of the body when user scrolls the content inside the popup (solution that I use was described here Prevent BODY from scrolling when a modal is opened)

I have a problem with this solution on the mobile (I test it on iPhone 6 in Safari).

My problem is following: if user touches the area outside of the popup, he can not scroll list inside of the popup for few seconds. It looks like scroll inside of the popup is freezing or unavailable by some time.

I use following code on the page:

<!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>

Here is the link on the code in codepen: http://codepen.io/annmirosh/pen/MJeaqO.

This is working example: https://sw22.firebaseapp.com

I will be appreciate for any ideas how to fix this problem with scroll freezing!

Thanks!

score 0 · Answer 1 · answered Jan 13 '17 at 07:50

This issue will arise if your website is not responsive and scrolling left and right, I mean to say if your web page have scroll on the bottom then this issue will arise.

However if the body of the HTML section have css of overflow:hidden then it will not scroll. http://codepen.io/annmirosh/debug/MJeaqO this link is not working.

Moreover I have check my own website have modal popup have also scroll on the right is not is not get touched with any other space.

if user touches the area outside of the popup (If there would be the css on the body of overflow hidden user will never get the area outside the popup since the layer back the popup get positioning of absolute or or fixed with increased z-index css property).

Here is proper solution: http://stackoverflow.com/questions/9538868/prevent-body-from-scrolling-when-a-modal-is-opened

It seems we are talking about different problems. I know that http://stackoverflow.com/questions/9538868/prevent-body-from-scrolling-when-a-modal-is-opened is proper solution, because I used it (as I mentioned in my first comment). My problem is following: when user touches outside area and tries vertical scrolling there, if he will try to scroll area inside the popup right after it, scroll INSIDE the popup will not work. Please see this link: https://sw22.firebaseapp.com — Anna Miroshnichenko, Jan 13 '17 at 08:23
Change css overflow:hidden from div .popup-container will not show the extra space. — Sangrai, Jan 13 '17 at 09:37

Scroll freezes in popup if area outside of the scroll component was touched on the mobile

1 Answers1