当前位置: 首页 > 知识库问答 >
问题:

javascript - 使用 ant-design-vue 的 tabs 组件,如何实现滚动条滚到 tabs 位置的时候 tab 吸顶,向上滚动时也能正常显示 tabs 上面的内容?

赵飞语
2023-12-15

如题,请问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>

共有1个答案

匡玉堂
2023-12-15

要实现你所描述的效果,可以考虑使用 CSS 的 position: stickytop 属性,结合 JavaScript 来控制滚动事件。下面是一个基本的示例:

首先,在你的 CSS 中,为 .tabs 元素添加 position: stickytop 属性。这会使该元素在滚动到指定的位置时固定在那个位置。

.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: stickyposition: fixed 的情况下,其父元素或全局的 overflow: hidden 属性没有被设置。

 类似资料: