相邻Div滚动控制：左侧Div独立滚动至下一类的JS实现咨询

当然可以用JavaScript实现这个效果！下面我会一步步给你拆解实现思路和代码示例，结合CSS来让右侧内容固定不动，左侧按需滚动。

1. 先搭好基础布局（HTML+CSS） #

首先我们需要给左右列设置合适的样式：右侧列固定在视口，不随页面滚动；左侧列可以独立滚动。这里假设你的HTML结构大概是这样的（如果和你的实际结构有出入，调整选择器即可）：

<div class="container">
  <!-- 左侧可滚动列 -->
  <div class="left-column">
    <div class="category" id="category-1">分类1</div>
    <div class="category" id="category-2">分类2</div>
    <div class="category" id="category-3">分类3</div>
    <div class="category" id="category-4">分类4</div>
  </div>
  <!-- 右侧固定列 -->
  <div class="right-column">
    <!-- 右侧固定内容 -->
    <p>我是右侧固定内容，不会随滚动移动</p>
    <p>不管左侧怎么滚，我都待在这儿~</p>
  </div>
</div>

对应的CSS设置：

.container {
  display: flex;
  min-height: 100vh;
}

/* 右侧固定在视口，不随页面滚动 */
.right-column {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100vh;
  background: #f5f5f5;
  padding: 20px;
  box-shadow: -2px 0 5px rgba(0,0,0,0.1);
}

/* 左侧列占剩余宽度，隐藏默认滚动条，由JS控制滚动 */
.left-column {
  flex: 1;
  margin-right: 300px; /* 给右侧列留出空间 */
  overflow: hidden;
  scroll-behavior: smooth; /* 让滚动过渡更自然 */
}

/* 每个分类占满视口高度，方便滚动定位 */
.category {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  border-bottom: 1px solid #eee;
}

2. JavaScript核心逻辑 #

我们需要监听页面的滚动事件，当用户滚动到页面底部时，触发左侧列滚动到下一个分类。具体步骤如下：

• 监听window.scroll事件，判断是否滚动到页面底部
• 跟踪当前显示的分类，找到下一个分类的位置
• 控制左侧列平滑滚动到目标分类，同时重置页面滚动条避免重复触发

代码示例：

// 获取核心元素
const leftColumn = document.querySelector('.left-column');
const categories = document.querySelectorAll('.category');
let currentCategoryIndex = 0;

// 判断是否滚动到页面底部的工具函数
function isAtPageBottom() {
  // 减10是为了避免精度问题，提前一点触发效果
  return window.innerHeight + window.scrollY >= document.body.offsetHeight - 10;
}

// 滚动到下一个分类的函数
function scrollToNextCategory() {
  // 如果已经是最后一个分类，就停止触发
  if (currentCategoryIndex >= categories.length - 1) return;
  
  currentCategoryIndex++;
  const nextCategory = categories[currentCategoryIndex];
  // 让左侧列滚动到目标分类的顶部
  leftColumn.scrollTo({
    top: nextCategory.offsetTop,
    behavior: 'smooth'
  });
  
  // 滚动后把页面滚动条拉回顶部，防止用户继续滚动重复触发
  window.scrollTo({ top: 0, behavior: 'instant' });
}

// 监听页面滚动事件
window.addEventListener('scroll', () => {
  if (isAtPageBottom()) {
    scrollToNextCategory();
  }
});

3. 关键细节说明 #

• 页面底部判断：通过视口高度加已滚动距离，和页面总高度对比来判断，减10是为了让触发更灵敏，不用精确滚到最底部。
• 左侧滚动控制：用scrollTo配合behavior: 'smooth'实现平滑滚动，滚动后重置页面滚动条，避免用户继续滚动再次触发。
• 分类高度设置：给每个分类设height: 100vh是为了让每个分类刚好占满视口，方便定位，你可以根据自己的需求调整这个高度。

如果你的实际HTML结构和示例不同，只需要修改对应的元素选择器和滚动定位逻辑即可，核心思路是一致的：监听页面滚动到底部，控制左侧容器滚动到目标位置，右侧通过CSS固定不动。

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