如题,请问vue页面使用an-design-vue的tabs组件,如何实现滚动条滚到tabs位置的时候tab吸顶,然后滚动条可以继续向下滚动查看内容,向上滚动时也能正常显示tabs上面的内容?
我的思路是:获取tabs距离顶部的距离,再跟滚动条距顶的距离做比较,tabs距顶>滚动距离时,用定位。
然后行不通,position: sticky不生效,兼容浏览器和父盒子不设置overflow:hidden、高度大于tabs都设置了,但就是不行。
改用position: fixed,刚到达距离判断的时候,能固定一瞬间,然后滚动条就自动回弹顶部,呈现的效果就是个bug:滚动条都不能正常滚动了
以下是代码
<div ref="scrollPositionContainer" class="h-full bg-[#F5F5F5] py-[14px] px-[20px] overflow-y-auto" @scroll="handleScroll"> <div class="parent bg-primary"> <product-info /> <a-tabs v-model:activeKey="activeKey" :tabBarGutter="30" class="tabs w-auto h-auto bg-[#FFFFFF] py-[14px] px-[20px] mt-10px box-border" :class="isFixed ? 'isfixed' : ''" > <a-tab-pane key="performance" tab="111"> <perform-trend-tab /> </a-tab-pane> <a-tab-pane key="style" tab="222" force-render>Content of Tab Pane 2</a-tab-pane> <a-tab-pane key="analys" tab="333">Content of Tab Pane 3</a-tab-pane> </a-tabs> </div></div>
const handleScroll = (e: any) => { scrollTop.value = e.target.scrollTop const top = window.pageYOffset || e.target.scrollTop // 此处是判断tab距顶和滚动距离,超过就让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 console.log(barOffsetTop.value) }) })
// 这是样式<style lang="less" scoped>: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: sticky; // position: -webkit-sticky; position: fixed; top: 0;}</style>
要实现你所描述的效果,可以考虑使用 CSS 的 position: sticky
和 top
属性,结合 JavaScript 来控制滚动事件。下面是一个基本的示例:
首先,在你的 CSS 中,为 .tabs
元素添加 position: sticky
和 top
属性。这会使该元素在滚动到指定的位置时固定在那个位置。
.tabs { position: sticky; top: 0;}
然后,在你的 JavaScript 中,监听滚动事件,并判断当前的滚动位置是否超过了 .tabs
元素的位置。如果超过了,就添加一个类(比如 .fixed
)到 .tabs
元素上,这个类可以设置 .tabs
元素的 position: fixed
。
const handleScroll = () => { const tabs = document.querySelector('.tabs'); const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if (scrollTop >= tabs.offsetTop) { tabs.classList.add('fixed'); } else { tabs.classList.remove('fixed'); }}window.addEventListener('scroll', handleScroll);
这个示例的基本思想就是在滚动到 .tabs
元素的位置时,将其固定在顶部,然后允许内容在它下面滚动。当滚动回到 .tabs
元素之上时,.tabs
元素将恢复到其原始位置。
注意:这个解决方案可能需要在每个 tab 内容部分设置一个最小高度,以确保在滚动到 tab 内容的最顶部时,页面不会出现空白。同时,你需要确保 .tabs
元素的 position: sticky
或 position: fixed
的情况下,其父元素或全局的 overflow: hidden
属性没有被设置。
现在的情况是:当内部滚动条滚动到底部时如果继续滚动,外部滚动条不会滚动,需要停顿或者移动鼠标滚动才能触发外层滚动条
本文向大家介绍vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法,包括了vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法的使用技巧和注意事项,需要的朋友参考一下 有时候我们需要页面滚动条滚动到某一固定的位置,一般使用Window scrollTo() 方法。 语法就是:scrollTo(xpos,ypos) xpos:必需。要在窗口文档显示区左上角显示的文档的
有没有办法隐藏微软Chrome的滚动条,只在没有滚动位置的时候隐藏?以下div/样式总是显示滚动条,水平和垂直。即使高度大于内容。 以下隐藏了滚动条: 但是我想让他们显示什么时候有地方可以滚动 是否也有只隐藏水平滚动条的方法?
element-ui 中 el-tabs如何让它超出固定宽度显示滚动条+左右选择器 目前按照以上写法,会实现滚动条+左右选择器,但是滚动条和选择器不是联动效果。如果我点击选择器,展示到最后一个tab-pane,在滑动滚动条时,最后一个tab-pane后边会有一片白,并且滚动条无法滚动到第一个tab-pane
我修改了滚动条的颜色,但是修改后它就变成常驻的了,我希望它和之前一样,只在滚动的时候才显示出来。 下面是我的代码: 我该如何修改?
在我正在开发的一个网站中,我有一个div,用于移动版的主菜单。 这个div是固定的(下面是css),但在某些情况下,它的高度大于设备的高度。 我想将div样式设置为但是,如果内容溢出设备的高度,我需要它在没有滚动条的情况下可滚动,并且不移动网站的其余部分。 CSS: JAVASCRIPT: HTML格式: 我能实现我假装的东西吗?