Question

我有一个wordpress网站，其基本主页结构如下：

<html>
    <head></head>
    <body>
        <div id="overlay"></div>
        <div id="scrolling-body">
            //lots of stuff here
        </div>
    </body>
</html>

我的CSS看起来像这样：

div.overlay {
    background:#000000;
    display:block;
    width:100%;
    height:100%;
    position:fixed;
    top:0px;
    bottom:0px;
    opacity:0;
    -webkit-transition: opacity 15s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
}

div.overlay.active {
    z-index: 10000;
    opacity:0.4;
}

我用简单的jQuery切换我的active类。

我的问题是，当叠加层为active时，我仍然可以滚动#scrolling-body，但仅限于iOS移动设备。我阻止在其他设备上滚动（scroll在切换active时计算）：

$(window).scroll(function(e) {
    e.preventDefault();
    $(document).scrollTop(scroll);
});

我已经尝试了SO上提到的touchstart解决方案（现在无法找到链接）。它们不起作用。我还需要做什么？

iOS阻止使用叠加滚动

0 个答案: