---
name: mobile-popup
title: 手机弹窗不卡顿
summary: 让人物介绍弹窗在每一种手机上都顺畅滑动——不跳、不卡、关掉后回到原位。
tags: [web, mobile]
---
# 手机弹窗不卡顿

我们在艺人页面遇到的三个问题和解法。

1. **一打开就滑到最底下。** 手机会把焦点移到第一个按钮，而按钮常在最下面。在弹窗最上方放一个看不见的焦点元素，打开时把弹窗捲动位置归零。
2. **关掉后，背后的页面跳回最上面。** 用 `<html>` 的 `overflow:hidden` 锁住页面，在 iPhone 上会清掉捲动位置。改成先记下 `scrollY`，再用 `position:fixed; top:-scrollY` 固定 body，关闭时还原捲动位置。
3. **弹窗边滑边变大变小。** 用 `vh`/`dvh` 设定的高度会随浏览器网址列收起而改变。弹窗里的图片改用 `svh`（最小可视高度）或固定尺寸，并加上 `env(safe-area-inset-bottom)` 的底部留白，让按钮不被工具列挡住。

另外：弹窗里不要自动播放影片。先显示封面图，点了才播放——影片载入会撑高版面。

上线前在大小不同的 iPhone 和几款 Android 手机上都测过。