鼠标移动联动div滚动异常求助：scrollX计算逻辑问题

核心问题分析 #

你的代码存在三个逻辑错误，导致滚动位置不符合预期：

• 子元素数量计算错误：childNodes会包含空白文本节点，导致缩略图数量被高估，进而算出错误的内容总宽度。
• 可滚动距离计算错误：误用window.innerWidth代替容器自身的可见宽度，忽略了容器的padding和自身尺寸。
• 滚动位置偏移错误：公式中多余的- width / 2导致滚动位置整体偏移，鼠标居中时滚动条偏右。

修正后的代码 #

JavaScript

const thumbnailWrapper = document.getElementById('thumbnail-wrapper');
const thumbnails = document.querySelectorAll('.thumbnail');

thumbnailWrapper.addEventListener('mouseenter', handleMouseMove);
thumbnailWrapper.addEventListener('mousemove', handleMouseMove);

function handleMouseMove(e) {
  // 获取真实的缩略图数量
  const totalThumbnails = thumbnails.length;
  const wrapper = e.currentTarget;
  // 容器的可见宽度
  const wrapperVisibleWidth = wrapper.clientWidth;
  // 总可滚动距离：内容总宽度 - 容器可见宽度
  const totalScrollableWidth = wrapper.scrollWidth - wrapperVisibleWidth;
  // 鼠标在容器内的相对位置比例（0~1）
  const mousePositionRatio = e.offsetX / wrapperVisibleWidth;
  // 计算目标滚动位置
  const targetScrollX = totalScrollableWidth * mousePositionRatio;

  // 执行滚动，可选添加平滑效果
  wrapper.scroll({
    left: targetScrollX,
    behavior: 'smooth'
  });
}

HTML（无需修改）

<div id="gallery">
  <div id="thumbnail-wrapper">
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
  </div>
  <div id="active-image" class="overflow-scroll">
    <img src="https://www.lifewire.com/thmb/_cH2YBd-iyPP1cqqj2WWXiCWudg=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/hdwallpapersnet-free-wallpaper-5919d3ca3df78cf5fa49bda3.jpg" alt="something went wrong" class="original">
  </div>
</div>

CSS（无需修改）

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

#gallery {
  width: 100vw;
  height: 100vh;
  background-color: #303030;
  display: flex;
  flex-direction: column;
}

#thumbnail-wrapper {
  display: flex;
  overflow-x: scroll;
  padding: 0.5rem 1rem;
}

#thumbnail-wrapper::-webkit-scrollbar {
  background-color: #000;
}

::-webkit-scrollbar-thumb {
  background: red;
}

.thumbnail {
  flex: none;
  width: 150px;
  height: 100px;
  border: 3px solid #303030;
  background-color: #202020;
  border-radius: 10px;
}

#active-image {
  flex: 1;
  position: relative;
  margin: 1rem;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-scroll {
  overflow: scroll;
}

.fit {
  height: 100%;
  margin: 0 auto;
}

.original {
  height: auto;
  position: absolute;
  top: 0%;
}

关键逻辑说明 #

1. 准确获取缩略图数量：用querySelectorAll('.thumbnail')直接选中所有缩略图元素，避免空白节点干扰。
2. 正确计算可滚动距离：scrollWidth是容器内所有内容的总宽度，减去容器自身的clientWidth（可见宽度），得到真正能滚动的距离。
3. 鼠标位置比例映射：用e.offsetX获取鼠标相对于容器内部的坐标，除以容器宽度得到0到1的比例，直接映射到滚动位置，确保鼠标在左侧时滚动到开头，居中时滚动到中间，右侧时滚动到末尾。
4. 平滑滚动优化：添加behavior: 'smooth'让滚动过渡更自然，匹配参考网站的效果。

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