Hey there! Let's tackle this frustrating scroll issue on iPhone 5 and 6—nothing's more annoying than content getting stuck when it should be scrollable, especially when you didn't set overflow:hidden. Let's walk through the most common fixes step by step:

1. Verify Your Viewport Meta Tag #

Older iOS versions (like those running on iPhone 5/6) are notoriously picky about viewport settings. A misconfigured tag can easily lock scrolling, even without explicit overflow restrictions.

Avoid using user-scalable=no unless you absolutely need it—it can inadvertently disable scrolling on smaller iOS devices. Stick to a robust, scroll-friendly viewport tag instead:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover">

If you had user-scalable=no in your tag, try removing it or switching to user-scalable=yes to test if scrolling unlocks.

2. Check for JavaScript Blocking Touch Events #

Custom touch event listeners (like those for swipes, drags, or custom interactions) often accidentally prevent native scrolling on iOS. Look for code that calls preventDefault() on touchmove events globally.

Instead of blocking touchmove across the entire document, restrict it to only the elements that need it:

const draggableCard = document.getElementById('draggable-card');
let isDragging = false;

draggableCard.addEventListener('touchstart', () => {
  isDragging = true;
});

draggableCard.addEventListener('touchmove', (e) => {
  // Only prevent default if we're actively dragging the element
  if (isDragging) {
    e.preventDefault();
  }
});

draggableCard.addEventListener('touchend', () => {
  isDragging = false;
});

3. Fix Body/HTML Height & Overflow Settings #

Even without overflow:hidden, setting height:100% on html and body can trap content that extends beyond the viewport. Try updating your base styles to ensure proper scroll behavior:

html, body {
  height: auto;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

min-height:100vh ensures the body takes at least the full viewport height, while overflow-y:auto lets it scroll naturally when content exceeds that space.

4. Enable iOS Momentum Scrolling #

Older iOS devices require a specific CSS property to activate their native smooth scrolling behavior. Apply this to any container holding scrollable content:

.scrollable-content {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}

This tells iOS to use its built-in momentum scrolling, which often fixes cases where scrolling feels unresponsive or locked.

Start with these checks—one of them will almost certainly resolve the issue. If you're still stuck, sharing a snippet of your viewport tag or relevant CSS/JS would help narrow things down further!

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