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

Question

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

Answer 1

要实现你所描述的效果，可以考虑使用 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 属性没有被设置。