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

  • Z时代
  • 2024-03-01
  • 分类：IT

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

以上是 使用 ant-design-vue 的 tabs 组件，如何实现滚动条滚到 tabs 位置的时候 tab 吸顶，向上滚动时也能正常显示 tabs 上面的内容？ 的全部内容， 来源链接： utcz.com/p/935238.html

回到顶部