Question

代码

在计算机中，我可以通过检测鼠标

来滚动iframe时禁用正文滚动

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

有任何修复建议吗？

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

Answer 1

尝试使用这些属性：

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

touchstart

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

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

touchend

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

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

1 个答案: