在MOBILE中滚动iframe时禁用身体滚动

Question

Below code 下面的代码

In computer, I can disable body scroll while scrolling iframe by detecting mouse 在计算机中，我可以通过检测鼠标来在滚动iframe时禁用身体滚动

In mobile, I am trying to disable body scroll by detecting touch in body but NOT WORK. 在移动设备中，我试图通过检测身体的触摸来禁用身体滚动，但不能工作。 I can see h1 changed to auto if I touch a point outside of simulator and h1 not changed to auto if I touch simulator . 我可以看到H1改为自动，如果我触摸点之外simulator和H1没有改变为自动，如果我碰simulator 。

Any suggestion to fix it? 有什么建议可以解决吗？

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

Also adding below code only work for computer. 另外添加以下代码仅适用于计算机。

<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

try to use these properties: 尝试使用以下属性：

for onmouseenter you can use touchstart that Triggers when the user makes contact with the touch surface and creates a touch point inside the element the event is bound to. 对于onmouseenter，您可以使用touchstart，当用户与触摸表面接触并在事件绑定到的元素内部创建触摸点时触发该触摸。

touchstart 触摸开始

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

for onmouseleave you can use touchend that triggers when the user removes a touch point from the surface. 对于onmouseleave，您可以使用当用户从表面移除接触点时触发的touchend。 It fires regardless of whether the touch point is removed while inside the bound-to element, or outside, such as if the user's finger slides out of the element first or even off the edge of the screen. 无论用户是在绑定元素内部还是外部移除触摸点，它都会触发，例如用户的手指先滑出元素还是滑出屏幕边缘。

touchend 触摸端

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

在MOBILE中滚动iframe时禁用身体滚动

问题描述

1 个解决方案

解决方案1
0 2018-05-10 18:21:13

在MOBILE中滚动iframe时禁用身体滚动

问题描述

1 个解决方案

解决方案1 0 2018-05-10 18:21:13

解决方案1
0 2018-05-10 18:21:13