mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-29 05:29:37 +08:00
55e0d13234
* chore: Add demo tsx check * chore: Prettier * chore: Fix lint * fix: Upload ts definition * chore: Demo onlt * docs: Fix demo * chore: Add CI action * chore: Use real name * chore: fix ts define * chore: fix more ts * chore: fix more ts * chore: More ts * chore: More ts * chore: More ts * chore: More ts * chore: More ts * chore: More ts * chore: More ts * chore: Update all rest TS demo * fix test case
47 lines
1.1 KiB
Markdown
47 lines
1.1 KiB
Markdown
---
|
|
order: 2
|
|
title:
|
|
zh-CN: 滚动容器
|
|
en-US: Container to scroll.
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
用 `target` 设置 `Affix` 需要监听其滚动事件的元素，默认为 `window`。
|
|
|
|
## en-US
|
|
|
|
Set a `target` for 'Affix', which is listen to scroll event of target element (default is `window`).
|
|
|
|
```tsx
|
|
import React, { useState } from 'react';
|
|
import { Affix, Button } from 'antd';
|
|
|
|
const Demo: React.FC = () => {
|
|
const [container, setContainer] = useState<HTMLDivElement | null>(null);
|
|
return (
|
|
<div className="scrollable-container" ref={setContainer}>
|
|
<div className="background">
|
|
<Affix target={() => container}>
|
|
<Button type="primary">Fixed at the top of container</Button>
|
|
</Affix>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
ReactDOM.render(<Demo />, mountNode);
|
|
```
|
|
|
|
<style>
|
|
#components-affix-demo-target .scrollable-container {
|
|
height: 100px;
|
|
overflow-y: scroll;
|
|
}
|
|
#components-affix-demo-target .background {
|
|
padding-top: 60px;
|
|
height: 300px;
|
|
background-image: url('https://zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg');
|
|
}
|
|
</style>
|