简体   繁体   English

如何在移动设备中禁用浏览器滚动?

[英]How to disable browser scrolling in mobile devices?

I have simple html file with an iframe inside, I've been trying to stop my browser from scrolling in both documents, yet this seem to work ometimes and sometimes it doesn't. 我有一个带有iframe的简单html文件,我一直在尝试阻止浏览器在两个文档中滚动,但是这有时可能起作用,有时却不起作用。

I've applied several listeners to stop interaction (ON BOTH DOCUMENTS), this one in the code being my last one. 我已经应用了多个侦听器来停止交互(在两个文档上),代码中的这个是我的最后一个。 I've changed mousmove, mousestart, mouseover, touchstart, {return false;} instead of stopPropagation(), etc. 我更改了mousmove,mousestart,mouseover,touchstart,{return false;}而不是stopPropagation()等。

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Stand Alone Game Version</title>
    <!-- TODO: Generar un ratio o factor para el tamaño del juego -->
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0, target-densitydpi=device-dpi">   
    <meta name="apple-mobile-web-app-capable" content="yes">
    <script type="text/javascript">
        document.addEventListener("touchstart", function(evt){
            evt.preventDefault();
            console.log("TOUCHING!");
            document.addEventListener("touchmove", function(evt){
            evt.preventDefault();
            console.log("MOVING!");
            return false});
            return false});
    </script>
    <style type="text/css">
        body {background-color:#b0c4de;}    
        .game-container
        {
            overflow: hidden;           
        }
    </style>
    <script>
    </script>
</head>
<body>
    <div id="game-container" class="game-container" style="display: block;">
        <iframe class ="gameframe" src="http://www.emol.com" frameborder="0" scrolling="no" width=512 height=2000></iframe>
    </div>
</body>

Now I'm testing with a Nexus 7. 现在,我正在测试Nexus 7。

Is there a stable solution for this? 有稳定的解决方案吗?

Best regards. 最好的祝福。

Try applying game-container on the body. 尝试在身体上使用游戏容器 If it is not working, you can also try to insert these lines in game-container 如果不起作用,您也可以尝试将这些行插入游戏容器

 max-width:100%;
 max-height:100%;

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM