textarea获取焦点后滚动行为异常的问题求助

I totally get how frustrating this is—Android’s touch handling for focused form elements can be really finicky compared to iOS and desktop. I’ve dealt with this exact weirdness before, so here are some tried-and-tested fixes you can try to get consistent scroll behavior across all devices:

Fix 1: Use CSS touch-action to lock scroll to the textarea #

Android’s touch event system sometimes prioritizes page-level scrolling over the focused textarea. Adding the touch-action property tells the browser to restrict touch interactions to the textarea itself when it’s focused:

textarea:focus {
  touch-action: pan-y; /* Only allow vertical scrolling on the textarea */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Enable smooth touch scrolling */
}

This should prevent the page from hijacking the scroll gesture when you’re interacting with the focused textarea.

Fix 2: Block touch event bubbling with JavaScript #

If CSS alone doesn’t do the trick, you can intercept touch events on the textarea and stop them from propagating up to the page. This makes sure the browser knows to handle the scroll on the textarea instead:

const targetTextarea = document.querySelector('textarea');

// Intercept touch start to mark the textarea as the active scroll target
targetTextarea.addEventListener('touchstart', (e) => {
  if (targetTextarea === document.activeElement) {
    e.stopPropagation();
  }
});

// Block scroll bubbling, and prevent overscroll from triggering page scroll
targetTextarea.addEventListener('touchmove', (e) => {
  if (targetTextarea !== document.activeElement) return;

  e.stopPropagation();
  
  // Stop page scroll when hitting the textarea's scroll boundaries
  const isAtTop = targetTextarea.scrollTop === 0 && e.touches[0].clientY > e.targetTouches[0].clientY;
  const isAtBottom = targetTextarea.scrollTop + targetTextarea.clientHeight >= targetTextarea.scrollHeight && e.touches[0].clientY < e.targetTouches[0].clientY;
  
  if (isAtTop || isAtBottom) {
    e.preventDefault();
  }
});

Fix 3: Ensure the textarea has clear layout constraints #

Sometimes Android fails to recognize the textarea as a scrollable element if its dimensions are ambiguous. Make sure you set explicit height bounds:

textarea {
  max-height: 300px; /* Adjust to fit your layout */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box; /* Prevent padding from breaking height calculations */
}

Avoid using height: 100% without a parent container that has a fixed height—this can confuse the browser’s touch scroll detection.

Fix 4: Check PWA-specific settings #

Since you mentioned this happens in Android PWAs too, double-check your web manifest to make sure there’s no setting overriding touch behavior. Avoid any display modes that might force full-screen constraints that interfere with scroll, and ensure your service worker isn’t accidentally modifying touch event handling.

Start with Fix 1 first—it’s the simplest and most likely to work. If that doesn’t resolve it, move on to the JavaScript intercept. Most of the time, one of these tweaks will get your Android scroll behavior matching iOS/desktop.

内容来源于stack exchange