在 MOBILE 中滚动 iframe 时禁用正文滚动答案

【问题标题】：Disable body scroll while scrolling iframe in MOBILE在 MOBILE 中滚动 iframe 时禁用正文滚动
【发布时间】：2018-10-21 02:04:26
【问题描述】：

以下代码

在计算机中，我可以在滚动 iframe 时通过检测鼠标来禁用正文滚动

在移动设备中，我试图通过检测身体触摸来禁用身体滚动，但不起作用。如果我触摸simulator 之外的点，我可以看到 h1 更改为 auto，如果我触摸 simulator，则 h1 不会更改为 auto。

有什么解决办法吗？

<!DOCTYPE html>
<html>
    <body>

        <section>

            <iframe id="simulator" style="background: #000000;" src="" width="378px" height="1500px" frameborder="0" scrolling="no"></iframe>

            <h1 id="toucheventtt">dsds</p>

            <script>
                function disable_scroll() {
                    document.body.style.overflow="hidden";
                    document.getElementById("toucheventtt").innerHTML = "hidden";
                }
                function enable_scroll() {
                    document.body.style.overflow="auto";
                    document.getElementById("toucheventtt").innerHTML = "auto";
                }
                document.getElementById("simulator").onmouseenter = disable_scroll;
                document.getElementById("simulator").onmouseleave = enable_scroll;

                document.body.addEventListener('touchstart', function(){
                    enable_scroll();
                }, false)
                document.body.addEventListener('touchend', function(){
                    disable_scroll();
                }, false)
            </script>

        </section>
    </body>
</html>

另外添加以下代码仅适用于计算机。

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
        html, body {
            overflow-y: hidden;
        }
        body {
            position: relative;
        }
    </style>
</head>

【问题讨论】：

标签： javascript html iframe document-body

【解决方案1】：

尝试使用这些属性：

对于 onmouseenter，您可以使用 touchstart，当用户与触摸表面接触并在事件绑定到的元素内创建一个触摸点时触发。

触摸启动

document.body.addEventListener('touchstart', function(){
    document.body.style.overflow="hidden";
}, false)

对于 onmouseleave，您可以使用当用户从表面移除触摸点时触发的 touchend。无论触摸点是在绑定到元素内部还是外部（例如用户的手指先滑出元素甚至滑出屏幕边缘），它都会触发。

触摸结束

document.body.addEventListener('touchend', function(){
    document.body.style.overflow="auto";
}, false)

【讨论】：

mmmm 尝试在模拟器元素上添加监听器，如下所示：document.getElementById("simulator").addEventListener('touchend', function()...
顺便说一句，如果touchstart in body，应该是overflow="auto"才能启用滚动？
是的，应该是
查看我编辑的帖子。代码正是我正在测试的