使用 ant-design-vue 的 tabs 组件实现滚动条滚到 tabs 位置
在 vue 页面中使用 ant-design-vue 的 tabs 组件时，可以实现滚动条滚动到 tabs 位置时吸顶，而向上滚动时也能正常显示 tabs 上面的内容。
思路：
获取 tabs 距离顶部的距离。监听滚动条滚动的事件，判断滚动条距离顶部的距离是否大于 tabs 距离顶部的距离。如果滚动条距离顶部的距离大于 tabs 距离顶部的距离，则将 tabs 的样式设为 position: fixed，使其固定在页面顶部。当向上滚动时，将 tabs 的样式恢复为 position: relative，使其回到正常位置。
代码示例：
import { Ref } from 'vue';import { nextTick } from 'vue';import { onActivated } from 'vue';export default { setup() { const scrollTop: Ref = ref(0); const barOffsetTop: Ref = ref(0); const isFixed: Ref = ref(false); const scrollPositionContainer = ref(null); const handleScroll = (e: any) => { scrollTop.value = e.target.scrollTop; const top = window.pageYOffset || e.target.scrollTop; // 判断 Tabs 距顶和滚动距离，超过就让 a-tabs 的 class 加上 isfixed 的样式 isFixed.value = top >= barOffsetTop.value ? true : false; } onActivated(() => { scrollPositionContainer.value?.scrollTo({ top: scrollTop.value }); nextTick(() => { // 获取 Tabs 距顶的距离 barOffsetTop.value += document.getElementsByClassName('tabs')[0]?.offsetTop; }) }) return { scrollTop, barOffsetTop, isFixed, scrollPositionContainer, handleScroll } }}:deep(.ant-tabs > .ant-tabs-nav) { margin: 0; background: #fff; padding-left: 20px; box-sizing: border-box;}:deep(.ant-tabs-content-holder) { height: auto; overflow-y: scroll;}.parent { position: relative;}.isfixed{ position: fixed; top: 0;}Content of Tab Pane 2 Content of Tab Pane 3
登录后复制
注意：
立即学习“前端免费学习笔记（深入）”；
position: sticky 可能不适用于所有浏览器。position: fixed 会导致滚动条无法正常滚动。因此，在向上滚动时将 tabs 的样式恢复为 position: relative。
以上就是Vue中如何使用ant-design-vue的Tabs组件实现滚动吸顶效果？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2638732.html
