问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
0qbwycuw
    271424
    头像
    fenbox
    6.8k217979

    如题，请问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>
    vue.jsant-design-vue前端javascriptcss3
    阅读 1.4k
    avatarAI BotBETA

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

    撰写回答
    你尚未登录，登录后可以
    • 和开发者交流问题的细节
    • 关注并接收问题和回答的更新提醒
    • 参与内容的编辑和改进，让解决方法与时俱进
    推荐问题