如何实现带点位的侧边滚动条页面切换滚动效果？

这种效果属于分段滚动联动侧边导航，核心是让页面内容按区块切换，同时侧边点位同步标记当前浏览位置，具体实现逻辑和步骤如下：

一、核心原理 #

• 页面拆分：将页面划分为多个固定高度（通常是100vh，即全屏）的内容区块，每个区块对应侧边的一个点位。
• 位置检测：通过Intersection Observer API（性能更友好）或滚动事件监听，判断哪个内容区块处于当前视口范围内。
• 样式联动：当检测到目标区块进入视口时，给对应的侧边点位添加高亮样式；点击侧边点位时，自动滚动到对应区块。

二、快速实现示例 #

1. HTML结构 #

<!-- 侧边点位导航 -->
<ul class="side-scroll-nav">
  <li data-target="section1" class="active"></li>
  <li data-target="section2"></li>
  <li data-target="section3"></li>
  <li data-target="section4"></li>
</ul>

<!-- 内容区块 -->
<section id="section1" class="scroll-section">区块1</section>
<section id="section2" class="scroll-section">区块2</section>
<section id="section3" class="scroll-section">区块3</section>
<section id="section4" class="scroll-section">区块4</section>

2. CSS样式 #

/* 全局基础样式 */
html {
  scroll-behavior: smooth; /* 开启平滑滚动 */
}
body {
  margin: 0;
  overflow-x: hidden;
}

/* 内容区块样式 */
.scroll-section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
#section1 { background: #f0f0f0; }
#section2 { background: #e0e0e0; }
#section3 { background: #d0d0d0; }
#section4 { background: #c0c0c0; }

/* 侧边导航样式 */
.side-scroll-nav {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  list-style: none;
  padding: 0;
  margin: 0;
}
.side-scroll-nav li {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #999;
  margin: 15px 0;
  cursor: pointer;
  transition: background 0.3s;
}
.side-scroll-nav li.active {
  background: #333;
  transform: scale(1.3);
}

3. JavaScript逻辑 #

// 获取所有点位和区块
const navItems = document.querySelectorAll('.side-scroll-nav li');
const sections = document.querySelectorAll('.scroll-section');

// 1. 滚动时联动点位
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 移除所有点位的active类
      navItems.forEach(item => item.classList.remove('active'));
      // 给对应点位添加active类
      const targetId = entry.target.id;
      const activeNav = document.querySelector(`.side-scroll-nav li[data-target="${targetId}"]`);
      activeNav.classList.add('active');
    }
  });
}, { threshold: 0.5 }); // 当区块进入视口50%时触发

// 给每个区块添加监听
sections.forEach(section => observer.observe(section));

// 2. 点击点位滚动到对应区块
navItems.forEach(item => {
  item.addEventListener('click', () => {
    const targetId = item.dataset.target;
    const targetSection = document.getElementById(targetId);
    targetSection.scrollIntoView({ behavior: 'smooth' });
  });
});

三、关键优化点 #

• 优先用Intersection Observer：替代频繁触发的scroll事件，浏览器原生API性能更优，无需手动计算滚动位置。
• 平滑滚动：CSS的scroll-behavior: smooth或JS的scrollIntoView({ behavior: 'smooth' })都能实现，前者更简洁。
• 响应式适配：移动端可通过媒体查询隐藏侧边导航，或调整点位的大小与位置。

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