iOS 17 Safari中Angular视频页面拖动视频区域无法滚动问题

问题原因 #

iOS 17 Safari 对 video 元素的触摸事件处理有特殊机制，默认会拦截触摸操作用于视频自身控制（如拖动进度条），导致页面滚动事件无法触发；同时容器设置的 overflow: scroll 也会干扰页面级滚动的事件传递。

修复方案 #

方案1：CSS 直接透传触摸事件（简单但会丢失视频交互） #

给 video 元素添加 CSS 属性，阻止其拦截触摸事件，让滚动事件直接传递到页面：

.custom-video > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* 新增属性 */
    pointer-events: none;
    touch-action: pan-y;
}

注：该方案会让视频的点击播放等交互失效，适合无需视频交互的场景。

方案2：保留视频交互的同时修复滚动 #

如果需要保留视频的点击播放功能，通过 Angular 事件监听手动处理触摸逻辑：

1. 修改组件 HTML，添加触摸事件监听：

<div [class]="containerClass" class="custom-video position-relative" *ngIf="src && !isVideoBroken">
    <video 
        [src]="src + '#t=0.01'" 
        id="video" 
        [class]="className" 
        (loadedmetadata)="onVideoLoad()"  
        (error)="onVideoError()" 
        playsInline 
        (click)="manage_video_play()"
        (touchstart)="onVideoTouchStart($event)"
        (touchmove)="onVideoTouchMove($event)"
    >
        Sorry, your browser doesn't support embedded videos.
    </video>
</div>

2. 在组件 TS 文件中添加事件处理逻辑：

private startY: number;

onVideoTouchStart(event: TouchEvent) {
    // 记录触摸起始位置
    this.startY = event.touches[0].clientY;
}

onVideoTouchMove(event: TouchEvent) {
    const currentY = event.touches[0].clientY;
    const deltaY = currentY - this.startY;
    
    // 判断为垂直滚动操作时，阻止视频默认行为，触发页面滚动
    if (Math.abs(deltaY) > 10) {
        event.preventDefault();
        window.scrollBy(0, deltaY > 0 ? -50 : 50); // 模拟滚动速度
    }
}

3. 调整容器 CSS，移除不必要的滚动属性：

.custom-video {
    >video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        touch-action: pan-y;
    }
    // 移除以下两行，避免容器滚动与页面滚动冲突
    // -webkit-overflow-scrolling : touch !important;
    // overflow: scroll;
}

方案3：透明遮罩层（兼顾交互与滚动） #

在视频上方添加透明遮罩层，统一处理点击和滚动事件：

1. 修改组件 HTML：

<div [class]="containerClass" class="custom-video position-relative" *ngIf="src && !isVideoBroken">
    <video 
        [src]="src + '#t=0.01'" 
        id="video" 
        [class]="className" 
        (loadedmetadata)="onVideoLoad()"  
        (error)="onVideoError()" 
        playsInline
    >
        Sorry, your browser doesn't support embedded videos.
    </video>
    <!-- 透明遮罩层，处理点击和滚动 -->
    <div class="video-mask" (click)="manage_video_play()"></div>
</div>

2. 对应 CSS：

.custom-video {
    position: relative;
    >video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    .video-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: transparent;
        touch-action: pan-y;
    }
}

该方案既保留了视频的点击播放功能，又能让垂直滚动事件正常传递到页面。

关键说明 #

touch-action: pan-y 是核心属性，它明确告诉浏览器：该元素仅允许垂直滚动操作，不会触发视频的默认触摸拦截逻辑，这是适配 iOS 17 Safari 的关键。

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