51 lines
1.1 KiB
Vue
51 lines
1.1 KiB
Vue
|
<docs>
|
|||
|
|
---
|
|||
|
|
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`).
|
|||
|
|
|
|||
|
|
</docs>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div id="components-affix-demo-target" ref="containerRef" class="scrollable-container">
|
|||
|
|
<div class="background">
|
|||
|
|
<a-affix :target="() => containerRef">
|
|||
|
|
<a-button type="primary">Fixed at the top of container</a-button>
|
|||
|
|
</a-affix>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<script lang="ts">
|
|||
|
|
import { defineComponent, ref } from 'vue';
|
|||
|
|
|
|||
|
|
export default defineComponent({
|
|||
|
|
setup() {
|
|||
|
|
const containerRef = ref();
|
|||
|
|
return {
|
|||
|
|
containerRef,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
<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>
|