在现代Web界面设计中，元素之间的平滑过渡效果能够显著提升用户体验。然而，当我们需要在两个具有不同内容高度的绝对定位元素之间实现渐变切换时，仅依靠 opacity 和 z-index 往往会遇到一个棘手的问题：即使一个元素通过 opacity: 0 被隐藏，如果其内容高度大于当前可见元素，它仍然可能导致页面出现不必要的滚动条，并可能暴露背景颜色或下方内容。这是因为 opacity: 0 只是让元素不可见，但其在布局中仍占据空间。
为了解决这一挑战，我们将介绍两种有效的实现方法。
方法一：结合可见性与高度控制（推荐）
此方法通过精妙地结合CSS的 visibility、height 和 overflow 属性，以及JavaScript的延迟操作，实现了既能渐变切换又不会影响页面滚动高度的效果。其核心思想是，在元素不活动时，不仅将其设置为透明，还通过 height: 0 和 overflow: hidden 将其在布局中“折叠”起来，从而消除其对滚动高度的影响。
实现原理
-
两阶段隐藏：
- opacity: 0 和 visibility: hidden 用于实现渐变效果。visibility: hidden 允许 transition，而 display: none 则会立即移除元素，无法进行渐变。
- height: 0 和 overflow: hidden 用于确保不活动的元素不占据任何垂直空间，从而避免影响 main 容器的滚动条。
- 延迟切换： 为了确保渐变效果能够完整播放，我们不能立即将元素的 height 设为 0 或移除 active 类。JavaScript 会先切换 visible 类来启动透明度渐变，等待渐变完成后（通过 setTimeout），再切换 active 类来改变元素的布局高度。
代码示例
HTML 结构:
<main>
<article id="intro" class="active visible">
<div class="content">
<div class="container">
这是首页
<button class="next">下一页</button>
</div>
</div>
</article>
<article id="about">
<div class="content">
<div class="container">
<button class="prev">上一页</button>
这是后面一页，内容较多，之前导致了滚动问题
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br>
</div>
</div>
</article>
</main>CSS 样式:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: pink; /* 用于观察问题是否解决 */
}
main {
position: relative;
height: 100%;
overflow-y: scroll; /* 允许主容器滚动 */
}
article {
inset: 0; /* top, right, bottom, left 均为 0，实现全覆盖 */
position: absolute;
transition: opacity .4s, visibility .4s; /* 渐变效果 */
min-height: 100%; /* 确保内容不足时也能撑满 */
height: max-content; /* 根据内容自适应高度 */
display: grid;
place-items: center; /* 使内容在 article 内部垂直和水平居中 */
}
/* 非活跃元素处理：高度折叠，不影响布局 */
article:not(.active) {
height: 0;
overflow: hidden;
}
/* 非可见元素处理：完全隐藏，可渐变 */
article:not(.visible) {
opacity: 0;
visibility: hidden;
}
/* 示例背景色 */
#intro {
background-color: lightblue;
}
#about {
background-color: lightgreen;
}
.content {
width: min(500px, 100%);
padding: 40px 20px;
}JavaScript 逻辑:
document.querySelectorAll('.next').forEach(btn => btn.onclick = () => changeArticle('next'));
document.querySelectorAll('.prev').forEach(btn => btn.onclick = () => changeArticle('prev'));
function changeArticle(direction) {
const activeArticle = document.querySelector('.active');
// 根据方向获取下一个或上一个兄弟元素
const elementSibling = direction === 'next' ? 'nextElementSibling' : 'previousElementSibling';
const nextArticle = activeArticle[elementSibling];
if (!nextArticle) return 
