优化单侧滚动、另一侧随滚动位置切换图片的滚动交互效果

阿华AIGC实验室

2026-4-30

解决左侧Fixed区域滚轮控制右侧滚动容器的问题

我来帮你搞定这个滚动交互的问题！你遇到的核心痛点是：左侧fixed定位的图片区域不在右侧滚动容器的滚动上下文里，所以鼠标放在左侧时，滚轮事件不会触发右侧内容滚动。下面给你两个实用的解决方案，你可以根据自己的实现场景选择：

方案一：监听全局滚轮事件，定向控制右侧滚动

这个方案适合不想改动现有DOM结构的情况，核心思路是捕获全局的滚轮事件，当鼠标在左侧区域时，手动驱动右侧容器滚动。

先给右侧滚动容器和左侧图片区域分别加上ID，比如right-scroll-container和left-fixed-area
用JavaScript监听鼠标进入/离开左侧区域的状态，再结合全局滚轮事件来处理滚动：

const rightContainer = document.getElementById('right-scroll-container');
const leftArea = document.getElementById('left-fixed-area');
let isMouseOverLeft = false;

// 标记鼠标是否在左侧区域
leftArea.addEventListener('mouseenter', () => {
  isMouseOverLeft = true;
});
leftArea.addEventListener('mouseleave', () => {
  isMouseOverLeft = false;
});

// 监听全局滚轮事件
window.addEventListener('wheel', (e) => {
  if (!isMouseOverLeft) return;
  
  // 阻止默认的页面滚动行为
  e.preventDefault();
  // 让右侧容器跟随滚轮方向滚动，deltaY是浏览器原生的滚动增量，用它会更自然
  rightContainer.scrollTop += e.deltaY;
  
  // 这里继续执行你原来的图片切换逻辑，比如根据rightContainer的scrollTop值切换图片
  updateLeftImage(rightContainer.scrollTop);
});

方案二：重构为全屏滚动容器（更贴近参考效果）

这个方案更接近你提到的参考网站实现，把整个页面的滚动逻辑集中在一个全屏容器里，这样不管鼠标放在页面哪个位置，滚轮都会触发容器滚动，左侧固定区域只是视觉上固定，不影响滚动上下文。

调整DOM结构，创建一个全屏的滚动容器：

<div id="full-page-scroll">
  <!-- 右侧滚动内容 -->
  <div id="right-content">
    <!-- 你的右侧内容 -->
  </div>
</div>
<!-- 左侧固定图片区域，放在滚动容器外面 -->
<div id="left-fixed-images"></div>

设置对应的CSS：

#full-page-scroll {
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  /* 隐藏滚动条（可选，参考网站可能做了这个） */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#full-page-scroll::-webkit-scrollbar {
  display: none;
}

#right-content {
  /* 右侧内容的宽度，比如占页面50%，和左侧图片区域平分 */
  width: 50%;
  margin-left: auto;
  /* 内容高度足够长，保证能滚动 */
  min-height: 300vh;
}

#left-fixed-images {
  position: fixed;
  left: 0;
  top: 0;
  width: 50%;
  height: 100vh;
  /* 确保左侧区域在内容上方 */
  z-index: 10;
}

监听滚动容器的滚动事件来切换图片：

const scrollContainer = document.getElementById('full-page-scroll');
const leftImages = document.querySelectorAll('#left-fixed-images img');

scrollContainer.addEventListener('scroll', () => {
  const scrollTop = scrollContainer.scrollTop;
  // 根据scrollTop的值判断切换哪张图片，逻辑和你原来的一致
  switchImageBasedOnScroll(scrollTop);
});

这个方案的优势是更符合用户的直觉——不管鼠标放在页面哪里，滚轮都能控制内容滚动，而且不需要处理全局事件的冲突，逻辑更简洁。