如何锁定窗口滚动但允许内部div滚动？移动端异常求助

Hey there, let's tackle that frustrating scroll issue you're dealing with—where your internal div scrolls fine in Chrome's dev tools but dies on real Android/iOS devices. I've run into this exact problem before, so here are some straightforward fixes to get it working:

1. Fix the CSS for Your Scroll Container First #

The biggest culprit here is often missing a critical mobile-specific CSS property. Update your scroll container's styles to include -webkit-overflow-scrolling: touch—this enables smooth, native-like scrolling on iOS and ensures touch events are recognized properly on both platforms.

Here's the adjusted style (I swapped scroll for auto so scrollbars only show when needed):

.scroll-container {
  height: 300px;
  min-height: 300px;
  max-height: 300px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* This is NON-NEGOTIABLE for mobile */
}

Without this property, iOS in particular will block touch scrolling on overflow containers when the main window is locked.

2. Ditch the <ScrollLock> Component for a Manual (More Reliable) Lock #

Many third-party ScrollLock components have weird mobile edge cases. Instead, implement a simple body scroll lock yourself that plays nice with internal scrolling:

Step 1: Add CSS for the Locked State #

.body-scroll-locked {
  position: fixed;
  width: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
}

Step 2: Add JS to Handle Lock/Unlock (and Prevent Scroll Jump) #

When you need to lock the window, save the current scroll position so you can restore it later:

// Lock window scroll
function lockBodyScroll() {
  const scrollY = window.pageYOffset || document.documentElement.scrollTop;
  document.body.classList.add('body-scroll-locked');
  // Push the body back up to avoid jump to top
  document.body.style.top = `-${scrollY}px`;
}

// Unlock window scroll
function unlockBodyScroll() {
  const scrollY = parseInt(document.body.style.top, 10);
  document.body.classList.remove('body-scroll-locked');
  // Restore the previous scroll position
  window.scrollTo(0, Math.abs(scrollY));
  // Clean up the inline style
  document.body.style.top = '';
}

This method ensures the main window stays locked while leaving your internal scroll container free to handle touch events.

3. Prevent Touch Event Bubbling (If Needed) #

If your internal container still won't scroll, it might be because touch events are bubbling up to the window and getting blocked. Add a listener to your scroll container to stop propagation only when the container is actually scrollable:

const scrollContainer = document.querySelector('.scroll-container');

scrollContainer.addEventListener('touchmove', (e) => {
  // Only stop propagation if the container has content to scroll
  const canScroll = scrollContainer.scrollHeight > scrollContainer.clientHeight;
  if (canScroll) {
    e.stopPropagation();
  }
}, { passive: true }); // Passive mode improves performance and avoids browser warnings

This ensures that touch events stay within the scroll container when it's supposed to scroll, but don't interfere with the rest of the page when there's nothing to scroll.

Quick Testing Tips #

• On iOS, make sure you're not testing in a private browsing window (some CSS properties behave differently there).
• Check for any global touchmove event listeners that might be calling preventDefault()—these can block all scrolling on mobile.

Give these steps a try, and your internal div should scroll smoothly on real devices while keeping the main window locked down!

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