通过将 popper 的锚元素设为 `position: fixed`，可使其脱离文档流、随视口固定显示，从而在页面滚动或 appbar 隐藏时仍保持可见，popper 会自动跟随该锚点持续呈现。
在使用 MUI <Popper> 构建常驻聊天机器人等悬浮交互组件时，一个常见痛点是：当用户滚动页面导致顶部 AppBar 隐藏后，原本依附于 AppBar 内按钮的 Popper 也随之消失——这是因为默认锚元素（如 <IconButton>）采用静态或相对定位，随文档流滚动而移出视口。
根本解法：锚元素固定定位（position: fixed）
Popper 的定位逻辑完全依赖 anchorEl 元素的位置。只要锚元素本身始终固定在视口某处（例如右下角），Popper 就能稳定跟随。无需复杂修饰符（如 preventOverflow），更不必监听滚动事件手动重定位。
✅ 正确实践示例：
import { IconButton, Popper, Box, Typography, Button } from '@mui/material';
import { useRef, useState } from 'react';
function ChatBotPopper() {
const popperRef = useRef<HTMLButtonElement>(null);
const [open, setOpen] = useState(false);
const handleClick = () => setOpen(!open);
const handleClose = () => setOpen(false);
return (
<>
{/* 锚元素：固定定位，脱离滚动影响 */}
<IconButton
onClick={handleClick}
ref={popperRef}
sx={{
position: 'fixed',
bottom: 16,
right: 16,
zIndex: (theme) => theme.zIndex.fab + 1, // 确保高于 FloatingActionButton
}}
>
<ChatIcon />
</IconButton>
{/* Popper 自动跟随 fixed 锚点 */}
<Popper
open={open}
anchorEl={popperRef.current}
placement="top-end"
modifiers={[
{
name: 'offset',
options: {
offset: [0, 8], // 微调与锚点间距
},
},
]}
>
{({ TransitionProps }) => (
<Box
sx={{
bgcolor: 'background.paper',
border: 1,
borderColor: 'divider',
borderRadius: 2,
p: 2,
boxShadow: 3,
maxWidth: 320,
}}
>
<Typography variant="h6" gutterBottom>
智能客服
</Typography>
<Typography variant="body2" color="text.secondary" paragraph>
您好！有什么可以帮您？
</Typography>
<Button size="small" onClick={handleClose} variant="outlined">
关闭
</Button>
</Box>
)}
</Popper>
</>
);
}⚠️ 注意事项：
- Z-index 控制层级：fixed 元素需设置足够高的 zIndex（推荐使用 theme.zIndex.fab + 1），避免被 AppBar、Drawer 或其他遮罩层覆盖；
- 避免与原生滚动冲突：切勿对 anchorEl 同时设置 position: fixed 和 transform（如 scale()），可能引发 Popper 位置计算偏差；
- 响应式适配：在移动端建议调整 bottom/right 值（如 bottom: 24, right: 24），并考虑添加 @media (max-width: 600px) 媒体查询优化间距；
- 无障碍支持：为 IconButton 添加 aria-label="打开聊天窗口"，并在 Popper 中包含 role="dialog" 和焦点管理逻辑（如首次打开时自动聚焦关闭按钮）。
总结：MUI Popper 本身不控制锚点行为，其“始终可见”的能力完全由锚元素的 CSS 定位决定。采用 position: fixed 是最轻量、最可靠、最符合 Web 标准的实现方式——简洁、高效、无副作用。
