如何用Vanilla JS实现基于鼠标位置控制垂直滚动的列表功能

核心实现逻辑 #

• 提前计算列表容器的可视高度、整体内容高度，得出最大可滚动距离（即scrollHeight - clientHeight）
• 监听列表容器的mousemove事件，实时计算鼠标在容器内的相对垂直偏移量
• 用鼠标偏移量占容器总高度的比例，乘以最大可滚动距离，得到当前应滚动到的scrollTop值，直接赋值给容器即可实现跟随鼠标位置滚动的效果
• 可选添加滚动动画过渡，让滑动效果更流畅

完整可运行示例代码 #

<!-- HTML部分 -->
<ul id="hover-scroll-list" class="scroll-list">
  <li>列表条目 1</li>
  <li>列表条目 2</li>
  <li>列表条目 3</li>
  <li>列表条目 4</li>
  <li>列表条目 5</li>
  <li>列表条目 6</li>
  <li>列表条目 7</li>
  <li>列表条目 8</li>
  <li>列表条目 9</li>
  <li>列表条目 10</li>
  <li>列表条目 11</li>
  <li>列表条目 12</li>
  <li>列表条目 13</li>
  <li>列表条目 14</li>
  <li>列表条目 15</li>
</ul>

/* CSS部分 */
.scroll-list {
  width: 200px;
  height: 300px;
  overflow: hidden; /* 隐藏默认滚动条 */
  border: 1px solid #eee;
  list-style: none;
  padding: 0;
  margin: 0;
  /* 可选添加平滑滚动过渡 */
  scroll-behavior: smooth;
}
.scroll-list li {
  padding: 12px 16px;
  border-bottom: 1px solid #f5f5f5;
}

// JS部分
const list = document.getElementById('hover-scroll-list');

list.addEventListener('mousemove', (e) => {
  // 获取容器尺寸和位置信息
  const rect = list.getBoundingClientRect();
  // 计算鼠标在容器内的相对Y坐标
  const relativeY = e.clientY - rect.top;
  // 计算鼠标位置占容器高度的比例
  const ratio = relativeY / rect.height;
  // 计算最大可滚动距离
  const maxScroll = list.scrollHeight - list.clientHeight;
  // 赋值滚动位置
  list.scrollTop = ratio * maxScroll;
});

可优化点 #

• 如果需要鼠标离开后保持当前滚动位置，不需要额外处理，默认就会保留
• 如果希望鼠标离开后回到顶部，可以监听mouseleave事件，把scrollTop设为0即可
• 可以调整比例计算逻辑，实现两端滚动更敏感、中间滚动更平缓的效果，适配不同交互需求
• 要兼容移动端的话可以额外监听touchmove事件，替换鼠标坐标为触摸点坐标即可

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