如何实现文本文章从视口外滑入动画并解决隐藏与滚动问题？

需求与问题 #

需要实现博客文本切换功能：

• 初始仅显示所有文本概览菜单（无滚动）
• 点击菜单标题后，对应文本从视口底部slide-up滑入并可滚动
• 点击另一标题时，当前文本slide-down滑出，新文本slide-up滑入

当前存在问题：视口外文本可见、文本无法正常滚动。

修改后的代码实现 #

HTML #

<nav class="menu">
  <div class="menuautohrtexts">
      
      <div class="menuline" data-target="text1c">
      <a class="menuauthors" href="#/text1">Author 1</a>
      <a class="menutexts" href="#/text1">Text 1</a>
      </div>

      <div class="menuline" data-target="text2c">
      <a class="menuauthors" href="#/text2">Author 2</a>
      <a class="menutexts" href="#/text2">Text 2</a>
      </div>

      <div class="menuline" data-target="text3c">
      <a class="menuauthors" href="#/text3">Author 3</a>
      <a class="menutexts" href="#/text3">Text 3</a>
      </div>
      
      <div class="menuline" data-target="text4c">
      <a class="menuauthors" href="#/text4">Author 4</a>
      <a class="menutexts" href="#/text4">Text 4</a>
      </div>

  </div>
</nav>

<article class="content">
<div class="text-item" id="text1c">

    <div class="textinfo">
        <h2 class="textauthor">Name 1</h2>
        <h2 class="texttitle">Title 1</h2>
    </div>

    <div class="textcontent">
        <p>Text 1</p>
        <!-- 可添加更多长文本测试滚动 -->
        <p>示例长文本内容...</p>
        <p>示例长文本内容...</p>
        <p>示例长文本内容...</p>
        <p>示例长文本内容...</p>
        <p>示例长文本内容...</p>
        <p>示例长文本内容...</p>
        <p>示例长文本内容...</p>
        <p>示例长文本内容...</p>
        <p>示例长文本内容...</p>
        <p>示例长文本内容...</p>
        <p>示例长文本内容...</p>
        <p>示例长文本内容...</p>
    </div>
        
</div>

<div class="text-item" id="text2c">

    <div class="textinfo">
        <h2 class="textauthor">Name 2</h2>
        <h2 class="texttitle">Title 2</h2>
    </div>

    <div class="textcontent">
        <p>Text 2</p>
    </div>
        
</div>

<div class="text-item" id="text3c">

    <div class="textinfo">
        <h2 class="textauthor">Name 3</h2>
        <h2 class="texttitle">Title 3</h2>
    </div>

    <div class="textcontent">
        <p>Text 3</p>
    </div>
        
</div>

<div class="text-item" id="text4c">

    <div class="textinfo">
        <h2 class="textauthor">Name 4</h2>
        <h2 class="texttitle">Title 4</h2>
    </div>

    <div class="textcontent">
        <p>Text 4</p>
    </div>
        
</div>
</article> 

CSS #

/* 初始状态：菜单占满视口，无滚动 */
html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100vh;
}

.menu {
  height: 100vh;
  overflow: auto;
  padding: 20px;
  box-sizing: border-box;
}

.menuline {
  margin-bottom: 15px;
}

/* 内容容器：固定在视口内，隐藏溢出内容 */
.content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* 文本项通用样式：初始在视口底部 */
.text-item {
  position: absolute;
  top: 100vh;
  left: 0;
  width: 100%;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
  transition: top 500ms ease;
  overflow-y: auto; /* 内容过长时可滚动 */
}

/* 激活状态：文本滑入视口 */
.text-item.active {
  top: 0;
}

JavaScript #

// 获取所有菜单行和文本项
const menuLines = document.querySelectorAll('.menuline');
const textItems = document.querySelectorAll('.text-item');

// 事件委托处理菜单点击
menuLines.forEach(line => {
  line.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止a标签默认跳转行为
    const targetId = this.dataset.target;
    
    // 移除所有文本的激活类
    textItems.forEach(item => item.classList.remove('active'));
    // 给目标文本添加激活类
    document.getElementById(targetId).classList.add('active');
  });
});

关键修改说明 #

1. 视口外文本隐藏：通过.content设置position: fixed和overflow: hidden，结合.text-item初始top: 100vh，让未激活文本完全移出视口且不可见。
2. 文本滚动控制：给.text-item添加overflow-y: auto，当文本内容超过视口高度时自动显示滚动条，同时保持容器高度为100vh。
3. 代码简化：使用统一的.text-item类和.active类替代原有的多个独立类，通过data-target属性关联菜单与文本，减少重复代码。
4. 初始状态优化：给html和body设置overflow: hidden，确保初始菜单无滚动，点击后激活的文本内部可独立滚动。

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