如何禁用移動設備中的瀏覽器滾動？

我有一個簡單的HTML文件，裏面有一個iframe，我一直在試圖阻止我的瀏覽器在兩個文檔中滾動，但這似乎工作ometimes，有時它不。如何禁用移動設備中的瀏覽器滾動？

我已經應用了幾個監聽器來停止交互（兩個文檔），這是代碼中的最後一個。我已經改變了mousmove，mousestart，鼠標懸停，touchstart，{返回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>

現在我用的Nexus 7

測試有沒有穩定的解決方案？

此致敬禮。

來源

2013-07-24 FeleMed

嘗試通過JS檢測手機瀏覽器，並添加CSS類溢出隱藏了相同的元素 – Mihail

@ user2257149 AFAIK溢出：隱藏出席渲染，而不是scrollabillity，您仍然可以滾動移動設備中的溢出隱藏頁面。 – FeleMed

嘗試在身體上應用遊戲容器。如果它不工作，你也可以嘗試插入遊戲容器這些線路

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

來源

2013-07-24 22:36:37 CydrickT

如何禁用移動設備中的瀏覽器滾動？

回答

相關問題