动态Tab内容切换收缩时禁用不必要页面滚动的问题求助

根因分析 #

1. 页面结构与样式存在问题：当前footer和.wrapper为平级结构，.wrapper设置了min-height: 100vh，哪怕内容再短，.wrapper已经占满整个视口高度，footer会被挤到视口之外，天然就会产生多余滚动条；同时html标签未设置高度，导致百分比高度的基准异常。
2. Tab切换未重置滚动位置：打开长内容Tab时滚动条会被拉到下方，切换到短内容Tab时浏览器不会自动重置滚动位置，滚动高度保留之前的长内容数值，就会出现内容很短但还能滚动的情况。

解决方案 #

第一步：调整HTML结构与CSS样式

将footer放入.wrapper容器内，适配flex布局的自适应逻辑：

<body>
  <div class="wrapper">
    <div class="content">
      <!-- Tab栏和Tab内容都放在这里 -->
    </div>
    <footer>
    </footer>
  </div>
</body>

修改对应CSS：

/* 给html标签设置高度，作为百分比高度的计算基准 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}
/* 去掉footer多余的定位属性，flex布局会自动处理位置：内容少时贴视口底部，内容多时跟在内容末尾 */
.footer{
  /* 保留你自己的footer样式即可，不需要relative和bottom:0 */
}

第二步：Tab切换时增加滚动重置逻辑

每次切换Tab的回调中，手动将页面滚动位置重置到顶部，消除之前长内容留下的滚动高度：

// 原生JS、Vue、React等框架都通用的逻辑，放在Tab切换的触发函数里即可
window.scrollTo(0, 0);

内容的提问来源于stack exchange，提问作者nivalderramas