Chrome Android端多iframe滚动异常问题求助

Hey there, let's figure out why only your first modal's iframe works with touch scrolling on mobile, and fix it without ditching iframes (since you can't modify the system's character limit right now).

First, let's break down the likely issue #

Your current CSS uses -webkit-overflow-scrolling: auto on the modal containers, which doesn't trigger the smooth touch scrolling behavior mobile browsers need. Plus, when using :target to show modals, later iframes might not get the proper touch scrolling initialization because they're hidden initially.

Here are actionable fixes to try: #

1. Update CSS to enforce touch scrolling everywhere

First, tweak your CSS to prioritize touch scrolling for both modals and iframes. Replace the auto values with touch where it matters:

.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
  z-index: 99999;
  opacity:0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  pointer-events: none;
  /* Change to touch for base modal */
  -webkit-overflow-scrolling: touch; 
}

.modalDialog:target {
  opacity:1;
  pointer-events: auto;
  /* Keep touch here too */
  -webkit-overflow-scrolling: touch; 
}

.modalDialog > div {
  width: 80%;
  height: 600px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #fff;
  /* Critical: enable touch scrolling on the modal container */
  -webkit-overflow-scrolling: touch; 
  overflow: auto;
  overscroll-behavior: contain;
}

.modalDialog iframe {
  width: 100%;
  height: 100%;
  /* Add touch scrolling directly to iframes */
  -webkit-overflow-scrolling: touch;
  overflow: auto;
}

This ensures that every modal and its iframe gets the mobile touch scrolling behavior enabled, even if they're hidden initially.

2. Add JavaScript to re-initialize scrolling when modals open

Sometimes, hidden iframes don't get their touch events registered properly until they're visible. Add this script to your page to force the iframe content to recognize touch scrolling when the modal is opened:

// Listen for hash changes (since you're using :target)
window.addEventListener('hashchange', function() {
  // Get the currently active modal
  const activeModal = document.querySelector('.modalDialog:target');
  if (!activeModal) return;
  
  // Get the iframe inside the active modal
  const iframe = activeModal.querySelector('iframe');
  if (!iframe) return;
  
  // Wait for the iframe to load (in case it's not fully loaded yet)
  iframe.onload = function() {
    // Force the iframe's body to allow touch scrolling
    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    iframeDoc.body.style.webkitOverflowScrolling = 'touch';
    iframeDoc.body.style.overflow = 'auto';
    iframeDoc.body.style.height = '100%';
  };
  
  // If the iframe is already loaded, trigger the fix immediately
  if (iframe.contentDocument) {
    const iframeDoc = iframe.contentDocument;
    iframeDoc.body.style.webkitOverflowScrolling = 'touch';
    iframeDoc.body.style.overflow = 'auto';
    iframeDoc.body.style.height = '100%';
  }
});

// Also run the fix on page load in case a modal is already open (e.g., direct link)
window.addEventListener('load', function() {
  const activeModal = document.querySelector('.modalDialog:target');
  if (activeModal) {
    const iframe = activeModal.querySelector('iframe');
    if (iframe && iframe.contentDocument) {
      const iframeDoc = iframe.contentDocument;
      iframeDoc.body.style.webkitOverflowScrolling = 'touch';
      iframeDoc.body.style.overflow = 'auto';
      iframeDoc.body.style.height = '100%';
    }
  }
});

This script checks when a modal is opened (via hash change) and ensures the iframe's content has the correct scrolling styles applied, even if it was hidden before.

3. Test with a small adjustment to modal display timing

If the above fixes still don't work, try adding a tiny delay before enabling pointer events on the modal, to give the iframe time to initialize:

.modalDialog:target {
  opacity:1;
  /* Add a small delay before enabling pointer events */
  transition: opacity 400ms ease-in, pointer-events 0s 400ms;
  pointer-events: auto;
  -webkit-overflow-scrolling: touch; 
}

This gives the iframe a moment to load and register its touch events before users can interact with it.

Why these fixes work #

Mobile browsers require -webkit-overflow-scrolling: touch to enable smooth touch-based scrolling (this is a webkit-specific property that's widely supported on iOS and Android). When elements are hidden initially, browsers sometimes don't apply these properties until the element becomes visible—so forcing them via CSS and JavaScript ensures they're active when the modal opens.

Give these a try, and let me know if you run into any edge cases!

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