Question

我尝试使用可滚动内容创建叠加层。问题是在我的iPhone上我不能总是在叠加层中滚动，而是滚动后面的内容。单击输入字段然后单击打开可以重现此问题。如何确保叠加层在打开时滚动？

这里是我的代码的小提琴： http://jsfiddle.net/czpkfwwh/1/

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            #overlay {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: yellow;
                overflow-y: scroll;
                -webkit-overflow-scrolling: touch;
            }

            #overlay.active {
                display: block;
            }
        </style>
    </head>
    <body>
        <input type="text" />
        <button id="open">BUTTON</button>
        <div id="overlay">
            <button id="close">CLOSE</button><br />
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                for(var i = 1; i <= 200; i++)
                    $('#overlay').append(i + '<br />');

                $('button').click(function () { $('#overlay').toggleClass('active'); });
            });
        </script>
    </body>
</html>

在Mobile Safari上滚动叠加层会滚动叠加层后面的内容

0 个答案: