如何实现页面两个半区独立滚动互不影响？

这个效果仅用CSS就可以完美实现，不需要搭配JavaScript，JS方案反而会增加不必要的性能开销和维护成本。
你当前代码出现同步滚动的核心原因是没有构建独立的滚动上下文：整个页面的滚动实际绑定在根文档上，左右两个半区没有被限制为固定高度的独立滚动容器，内容超出时会把整个页面撑开，自然会出现滚动时两边一起动的问题。

1. 清理冗余与错误：原有代码中定义的.inner-1样式没有被任何元素引用，属于冗余代码可直接删除；另外右侧区域的<p>标签没有闭合，会导致布局解析异常，需要补全闭合标签。
2. 给网格容器设置固定的视口高度，禁止容器本身产生滚动。
3. 给左右两个半区单独开启垂直滚动规则，让内容超出时在自身容器内完成滚动。

CSS部分 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  /* 锁死容器高度为视口高度 */
  height: 100vh;
  /* 容器本身不处理溢出滚动 */
  overflow: hidden;
}

.left,
.right {
  height: 100%;
  /* 内容超出时在当前区域内产生垂直滚动 */
  overflow-y: auto;
  /* 阻止滚动链传递，避免滚到底部触发外层滚动 */
  overscroll-behavior: contain;
  padding: 1rem;
}

.left {
  border-right: 1px solid #000;
}

JSX/HTML部分 #

<div className="container">
  <div className="left">
    <p>left side</p>
    {/* 填充足够多的内容即可测试独立滚动效果 */}
  </div>
  <div className="right">
    <p>right side</p>
    {/* 填充足够多的内容即可测试独立滚动效果 */}
  </div>
</div>

• height: 100vh：将网格容器高度和浏览器视口绑定，两个半区的高度不会被内部内容撑开，始终和视口等高。
• overflow-y: auto：为左右半区开启独立滚动，滚动事件只会作用在当前触发的区域，不会影响另一侧。
• overscroll-behavior: contain：优化滚动隔离效果，彻底阻断滚动事件向外层传递，避免某一侧滚动到边界时带动其他区域滚动。

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