antd Popconfirm 弹出会造成屏幕滚动到最上方
时间: 2024-10-25 21:05:24 浏览: 16
antd的select下拉框因为数据量太大造成卡顿的解决方式
antd的`Popconfirm`组件默认会将焦点置于其内部的元素上,当它弹出并聚焦时,如果没有阻止浏览器的滚动行为,可能会导致页面滚动到顶部。这是因为当你点击确认按钮时,浏览器为了获取焦点而触发了滚动。
为了避免这种滚动效果,你可以通过设置一些属性来控制:
1. **onVisibleChange**: 可以监听Popconfirm的可见性变化,在隐藏时手动滚动回原来的位置。
```jsx
<Popconfirm onVisibleChange={handleVisibleChange}>
<Button>点击弹出</Button>
</Popconfirm>
// 在handleVisibleChange函数中处理滚动
const handleVisibleChange = (visible) => {
if (!visible) {
window.scrollTo({ top: yourOriginalScrollPosition });
}
};
```
2. **preventDefaultFocus**: 使用`preventDefaultFocus`属性可以防止焦点自动移动。
```jsx
<Popconfirm preventDefaultFocus>
<Button>点击弹出</Button>
</Popconfirm>
```
然而,如果你需要这个确认提示始终保持在可视区域,可以考虑使用`Tooltip`替代,或者对`Popconfirm`进行自定义样式调整,使其不会改变滚动位置。
阅读全文