PhoneGap/Cordova：防止水平滾動

我有一個應用程序構建在科爾多瓦和我的一些頁面上，我可以水平滾動出我的內容到白色空間。PhoneGap/Cordova：防止水平滾動

這很奇怪，因爲我沒有任何東西超出我的#wrapper，它設置爲width: 100%。

所以我想知道是否有一種方法可以完全禁用水平滾動應用程序？

UPDATE：頁面上

代碼的要求：

body { 
    background-color: #fff; 
    font-family:Arial, Helvetica, sans-serif; 
    color: #b7b8b9; 
    height: 100%; 
    width: 100%; 
} 

iframe{ 
    border: none; 
    width: 100%; 
    /*margin-top: 50px;*/ 


    } 

#header{ 
    height: 50px; 
    width: 100%; 
} 


<body> 
     <div id="wrapper"> 
     <div id="header"> 
      <div class="headerback"><a href="index.html">Home</a></div> 
      <div class="headerrefresh"><script>var pathname = window.location.pathname;</script><script>document.write('<a href="'+pathname+'">Refresh</a>')</script></div> 
      <div class="headertitle"><h2>Get the Look</h2></div> 

     </div><!--HEADER--> 
    <iframe src="http://www.mbff.com.au/getthelook"></iframe> 
    </div> 
    </body>

This is what happens on horizontal scroll

來源

2012-06-26 MeltingDog

正在滾動出內容反彈效果嗎？ – nhahtdh

@nhahtdh不，它的行爲就像一個div擴展到包裝的一邊 - 它只是略微滾動到空白空間 – MeltingDog

我似乎無法重現設備上的問題。你可以張貼截圖嗎？ – nhahtdh

嘗試用你的設備的確切尺寸調試在瀏覽器（WebKit的），你的頁面。這爲我解決了大多數渲染問題。

我不知道這裏的具體問題，但它看起來像你的元素之一流出的包裝。例如，你可以試試這個在您的css：

div.wrapper { overflow: hidden; width: inherit; }

雖然它可能是一個更好的主意，找出爲什麼你的網頁被水平擴大？

來源

2012-07-04 09:36:43

是的，謝謝Justus。這是一個不正確的身體寬度在我的iphone特定的CSS – MeltingDog

確認這是正確的修復科爾多瓦6.3.1，運行在Android 6和7 –

// Phone Gap disable only horizontal scrolling in Android. 

// Add this code in your Phone Gap Main Activity.Initially Declare the variable 

private float m_downX; 

//Then add this code after loadUrl 

this.appView.setOnTouchListener(new View.OnTouchListener() { 
    public boolean onTouch(View v, MotionEvent event) { 

     switch (event.getAction()) { 
      case MotionEvent.ACTION_DOWN: { 
       // save the x 
       m_downX = event.getX(); 
      } 
      break; 

      case MotionEvent.ACTION_MOVE: 
      case MotionEvent.ACTION_CANCEL: 
      case MotionEvent.ACTION_UP: { 
       // set x so that it doesn't move 
       event.setLocation(m_downX, event.getY()); 
      } 
      break; 
     } 
     return false; 
    } 
});

來源

2012-09-25 07:39:59

非常感謝！ –

嘗試添加以下代碼到你的.html文件：

document.body.addEventListener('touchmove', function(event) { 
    event.preventDefault(); 
}, false);

來源

2013-03-26 18:37:53 Gustus

這甚至阻止了垂直滾動。 –

如何刪除此lsitener之後，我嘗試removeeventlistener但仍然不滾動 –

我一直在尋找解決這個問題很長時間。最後我用下面的方法解決了它。我設置樣式爲body和html標籤：

position: fixed; 
width: 100%; 
height: 100%; 
overflow: hidden;

之後，我已經加入到div和body設置樣式爲它：

overflow-y: auto; 
height: 100%;

所以，我有固定體，它包含與垂直滾動條的div。

來源

2015-07-09 14:19:17

爲了完整起見，我認爲應增加其利用通過preference標籤做這樣的事的官方法的答案：

<preference name="DisallowOverscroll" value="true"/>

支持Android和iOS根據documentation。

默認值：false

設置爲true，如果你不想要的界面，當用戶滾動過去的開頭或內容的最終顯示任何反饋。在iOS上，超滾動手勢會導致內容恢復到原始位置。在Android上，它們沿內容的頂部或底部邊緣產生更微妙的發光效果。

來源

2017-07-13 13:35:32 Script47

注意：在技術上，這是正確的，但有些人可能會遇到非常小的超滾（在我的情況下，它是一個像素），[這個答案]（https://stackoverflow.com/a/31320257/2374365）與此合作 –

PhoneGap/Cordova：防止水平滾動

回答

相關問題