移动端Safari中JavaScript触摸事件失效，如何限制iframe触摸时页面滚动？

I've run into this exact issue before—Mobile Safari has some quirky behavior with touch events and iframes that makes isolating scrolling harder compared to Chrome. Let's get your desired behavior working: scroll the page when touching the body, but lock page scrolling when touching the iframe (while keeping the iframe's internal scrolling intact if needed).

Why Your Current Code Isn't Working in Safari #

• Safari handles overflow changes on the body less reliably than Chrome, especially during active touch interactions.
• Touch events from the iframe bubble up to the body by default, triggering page scrolling even when you're trying to interact with the iframe content.
• The -webkit-overflow-scrolling: touch property in Safari has strict rules about how parent and child elements share scroll event handling.

Working Solution for Mobile Safari #

Here's a refined implementation that targets Safari's quirks while maintaining cross-browser compatibility:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            margin: 0;
            -webkit-overflow-scrolling: touch;
            overflow-y: auto;
        }
        .iframeContainer {
            width: 189px;
            height: 405px;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            /* Tell Safari this element only handles vertical scroll */
            touch-action: pan-y;
        }
        iframe {
            width: 100%;
            height: 100%;
            border: 0;
            scrolling: no;
        }
        section p {
            padding: 1rem;
            font-size: 1.2rem;
        }
    </style>
</head>
<body>
    <section>
        <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
        <div class="iframeContainer" id="iframeContainer">
            <iframe id="appSimulator" src="https://appetize.io/embed/keyyyyyyy?device=iphone5s&scale=50&autoplay=false&orientation=portrait&deviceColor=black&language=zh-Hant"></iframe>
        </div>
        <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
    </section>

    <script>
        const iframeContainer = document.getElementById('iframeContainer');
        let startY = 0;

        // Capture initial touch position and stop event bubbling
        iframeContainer.addEventListener('touchstart', (e) => {
            startY = e.touches[0].clientY;
            e.stopPropagation();
        }, { passive: false });

        // Handle touch movement to lock page scrolling
        iframeContainer.addEventListener('touchmove', (e) => {
            const currentY = e.touches[0].clientY;
            const { scrollTop, scrollHeight, clientHeight } = iframeContainer;

            // Check if we're at the top or bottom of the iframe container
            const isScrolledToTop = scrollTop === 0 && currentY > startY;
            const isScrolledToBottom = scrollTop + clientHeight >= scrollHeight && currentY < startY;

            // Prevent page scrolling if we can't scroll further in the iframe
            if (isScrolledToTop || isScrolledToBottom) {
                e.preventDefault();
            }
            // Always stop the event from reaching the body
            e.stopPropagation();
        }, { passive: false });
    </script>
</body>
</html>

Key Fixes Explained #

1. Event Bubbling Prevention: Using e.stopPropagation() in touchstart and touchmove ensures touch events from the iframe never reach the body, so the body won't trigger unintended scrolling.
2. Scroll Boundary Detection: We check if the iframe container is already at the top or bottom of its scroll range. If so, we call e.preventDefault() to stop Safari from scrolling the page instead of the iframe.
3. Safari-Specific Optimizations:
   • touch-action: pan-y tells Safari that this element only handles vertical scrolling, reducing unexpected scroll behavior.
   • { passive: false } is critical because Safari defaults to passive touchmove events, which block e.preventDefault() unless explicitly disabled.
   • Keeping -webkit-overflow-scrolling: touch preserves Safari's smooth elastic scroll effect for the iframe content.

This implementation will behave exactly like your Chrome demo: touch the body to scroll the page, touch the iframe to scroll only the iframe content (with no page scrolling), and works reliably in Mobile Safari.

内容的提问来源于stack exchange，提问作者Pak Ho Cheung