如何实现支持多方向平滑跳转的连续横向HTML单页布局？

最优方案采用CSS Grid + 原生滚动API实现，代码量少、易维护，完全符合你的需求：

• 纵向可正常滚动查看「引导页」「关于我」板块
• 仅通过按钮触发横向平滑切换到博客板块，禁止用户手动横向滑动
• 所有内容都在单页内，无需拆分文件

核心实现思路 #

1. 外层容器用Grid划分为两个等宽（100vw）的列，第一列承载纵向正常流的主内容，第二列固定高度为100vh承载博客内容
2. 外层容器设置overflow-x: hidden屏蔽用户手动横向滚动，同时添加scroll-behavior: smooth实现原生平滑滚动效果，无需额外动画库
3. JS仅需控制外层容器的scrollLeft属性即可完成横向切换，逻辑极简

完整代码示例 #

HTML #

<div class="page-container">
  <!-- 第一列：主内容区 纵向滚动 -->
  <main class="main-content">
    <section class="hero">主引导页 100vh</section>
    <section class="about">关于我 100vh</section>
    <button id="toBlogBtn">前往博客板块</button>
  </main>
  <!-- 第二列：博客区 固定视口高度 -->
  <section class="blog-content">
    <button id="backHomeBtn">返回主页</button>
    <div>博客内容在这里</div>
  </section>
</div>

CSS #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.page-container {
  /* 两列 每列宽度100vw */
  display: grid;
  grid-template-columns: 100vw 100vw;
  /* 禁止横向手动滚动 */
  overflow-x: hidden;
  /* 原生平滑滚动 */
  scroll-behavior: smooth;
}
.main-content {
  /* 主内容区正常纵向滚动 */
  min-height: 100vh;
}
.hero, .about {
  height: 100vh;
}
.blog-content {
  /* 博客区占满视口高度 不随主内容纵向滚动 */
  height: 100vh;
  position: sticky;
  top: 0;
}

JavaScript #

const toBlogBtn = document.getElementById('toBlogBtn')
const backHomeBtn = document.getElementById('backHomeBtn')
const pageContainer = document.querySelector('.page-container')

toBlogBtn.addEventListener('click', () => {
  // 横向滚动1个视口宽度 显示博客区
  pageContainer.scrollLeft = window.innerWidth
})

backHomeBtn.addEventListener('click', () => {
  // 滚动回初始位置 显示主内容区
  pageContainer.scrollLeft = 0
})

方案优势 #

• 相比并排div的方案，不需要处理flex的宽度溢出、浮动清除等问题，Grid布局天然实现并列结构
• 利用position: sticky固定博客区的位置，切换到博客区后不会跟随主内容区的纵向滚动偏移，交互更符合预期
• 所有动效依赖原生API实现，无额外依赖，代码总量不足100行，后续调整布局也非常方便

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