使用vue写一个tab切换， 当tab切换时内容的滚动区域可否不要相互影响

Question

demo：
https://codepen.io/anon/pen/o...

就是说 当我点击tab1时，tab1的内容滚动到tab1-20时， 然后点击tab2，tab2的内容应该是从tab2-1开始的，但是实际上是从tab2-20开始，tab1的内容滚动位置影响了tab2的内容展示

期望： tab下面内容的滚动应该相互独立，不应相互影响
实际： tab下面内容的滚动会影响其它tab内容的滚动位置

请指教，谢谢

Answer 1

删掉 .tab-content ，将类挪到里面去，这样各个的 overflow 就不一样；然后将 v-if 换成 v-show，元素就不会被销毁。

    <!-- <keep-alive></keep-alive> -->
    <div class="tab-content" v-show="activeIndex === 0">
      <div v-for="i in all">tab1-{{i}}</div>
    </div>
    <div class="tab-content" v-show="activeIndex === 1">
      <div v-for="i in all">tab2-{{i}}</div>
    </div>
    <div class="tab-content" v-show="activeIndex === 2">
      <div v-for="i in all">tab3-{{i}}</div>
    </div>

Answer 2

可以试试这样：
最外的div 上加 v-if
<div v-if = 'show' class="tab-content" >

每次tab切换，都动态改变show;

new Vue({
  el: '#app',
  data: {
    show:false,
    activeIndex: 0,
    all: 50
  },
   methods: {
     tabClick(index) {
       this.show = false;
       this.$nextTick(()=>{
           this.show = true;
           this.activeIndex = index
        })
      }
   }
})

Answer 3

请问楼主怎么解决的啊！

Answer 4

这个问题的解法就是，overflow: auto要写在子tab中。

不要让子tab们，共用一个overflow