Cordova安卓应用touch-action:none偶发失效，求CSS优化方案

Hey there! I’ve dealt with this exact frustrating quirk in Cordova Android apps before—when you think you’ve locked down scrolling with CSS, but it still pops up randomly. Let’s break down actionable fixes tailored to your setup:

1. Lock Down Every Level with CSS #

Just setting touch-action: none on body might not cut it, since the html element or your root page container could still retain scroll behavior. Expand your CSS to cover all top-level elements:

html, body, .your-root-page-container {
  touch-action: none;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  position: fixed; /* Extra insurance to lock the viewport */
}

The position: fixed rule adds an extra layer to prevent any unintended viewport shifting that can trigger scrolls.

2. Add a JavaScript Touch Event Fallback #

Android WebView can have inconsistent support for touch-action across versions. Add a global touchmove listener to block default scroll behavior:

// Place this in your app's initialization code
document.addEventListener('touchmove', (e) => {
  e.preventDefault();
}, { passive: false });

The passive: false flag is critical here—modern browsers default to passive touchmove listeners, which ignore preventDefault() unless you explicitly disable passive mode.

3. Reset Scroll Position When Switching Back to the First Page #

Since you’re toggling div visibility to switch pages, it’s possible the browser retains a hidden scroll position from a previous page. When switching back to your first page, force the viewport to reset to the top:

// Inside your page-switch logic for the first page
function switchToFirstPage() {
  // Your existing show/hide logic here...
  
  // Reset scroll position
  window.scrollTo(0, 0);
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}

This eliminates any residual scroll that might "bleed through" when the first page becomes visible.

4. Tweak Cordova WebView Settings #

Update your config.xml to disable WebView-level scrolling and overscroll effects:

<!-- Disable overscroll bounce -->
<preference name="DisallowOverscroll" value="true" />
<!-- Disable native WebView scrolling -->
<preference name="ScrollEnabled" value="false" />
<!-- Android-specific: Turn off overscroll mode entirely -->
<preference name="android-webview-settings" value="{'overScrollMode': 'never'}" />

These settings bypass any WebView-level behaviors that might override your CSS/JS locks.

5. Audit for Accidental Scrollable Containers #

Double-check all your page divs for unintended overflow: auto or overflow: scroll styles. Even a single nested scrollable element can trigger unexpected page scrolling in Android WebView due to event bubbling. Use Chrome’s remote debugging tool (connect your Android device to Chrome and inspect the Cordova WebView) to inspect each element’s overflow properties.

Combining these fixes should stamp out those occasional scrolls. Let me know if you hit any snags with specific steps!

内容的提问来源于stack exchange，提问作者eliotRosewater