onmousemove事件while语句失效 鼠标驱动水平滚动实现问题

问题根因 #

• 你添加的while是同步死循环：transformedX是onmousemove回调里的固定值，循环内部没有任何逻辑修改这个变量，只要触发回调时transformedX > 0，循环会永远执行，直接阻塞浏览器JS主线程，页面连渲染、响应交互的机会都没有，必然卡死崩溃。
• 初始版本鼠标停住就停止滚动的原因很简单：onmousemove事件只有鼠标移动时才会触发，鼠标静止时回调根本不执行，自然不会更新scrollLeft值。

实现思路 #

不要把滚动逻辑完全绑定在onmousemove的触发时机上：

• 全局存储最新的鼠标横坐标偏移值，onmousemove触发时只负责更新这个值、更新鼠标跟随圆圈的位置
• 用requestAnimationFrame运行常驻帧循环，每一帧都根据当前存储的鼠标偏移值计算滚动量，不管鼠标有没有移动都会持续执行滚动逻辑
• 增加滚动边界判断，滚到页面最左/最右时停止对应方向的滚动，避免无意义计算

修复后完整代码 #

JavaScript 逻辑 #

// 全局存储鼠标状态、动画帧ID
let currentTransformedX = 0;
let currentMouseY = 0;
let animationId = null;
const viewportWidth = window.innerWidth;
const windowCenterX = viewportWidth / 2;

// 鼠标移动时仅更新最新位置数据
document.onmousemove = function(e) {
  const mouseX = e.clientX;
  currentMouseY = e.clientY;
  currentTransformedX = mouseX - windowCenterX;
  document.getElementById("mouse-value").textContent = Math.round(currentTransformedX);
  document.getElementById("mouse-circle").style.top = currentMouseY - 15 + "px";
  document.getElementById("mouse-circle").style.left = document.documentElement.scrollLeft + mouseX - 20 + "px";

  // 首次触发鼠标移动时启动滚动循环，避免页面加载后空耗性能
  if (!animationId) {
    startScrollLoop();
  }
}

// 持续滚动帧循环
function startScrollLoop() {
  const maxScrollLeft = document.documentElement.scrollWidth - window.innerWidth;
  // 滚动速度系数，可根据实际交互需求调整大小
  const speedFactor = 0.02;

  function frameLoop() {
    const currentScroll = document.documentElement.scrollLeft;
    const scrollStep = currentTransformedX * speedFactor;
    // 边界判断：未到达滚动边缘时才更新位置
    if (
      (currentTransformedX > 0 && currentScroll < maxScrollLeft) ||
      (currentTransformedX < 0 && currentScroll > 0)
    ) {
      document.documentElement.scrollLeft = currentScroll + scrollStep;
    }
    // 注册下一帧回调
    animationId = requestAnimationFrame(frameLoop);
  }
  frameLoop();
}

CSS 样式 #

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100% !important;
}

#main-content {
  height: 100% !important;
  width: 9000px;
  background-image: linear-gradient(to right, #fff, #000);
}

#mouse-circle {
  position: absolute;
  z-index: 100;
  height: 40px;
  width: 40px;
  background-color: black;
  border: 1px solid white;
  border-radius: 100px;
  pointer-events: none;
}

#right-arrow {
  height: 70px;
  width: 70px;
  background-color: black;
  border: 1px solid white;
  border-radius: 100px;
  position: absolute;
  left: 90%;
  top: 45%;
}

#mouse-position {
  height: 20px;
  width: 50px;
  border: 1px solid black;
  text-align: center;
  position: absolute;
  left: 80%;
}

HTML 结构 #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="mouse-circle"></div>

<div id="main-content">
  <div id="right-arrow">
    <i style="color: white; margin: 35%;font-size: 25px;" class="fa fa-arrow-right" aria-hidden="true"></i>
  </div>
  <div id="mouse-position">
    <p id="mouse-value">0</p>
  </div>
</div>

优化点说明 #

• 修正了原代码的步长计算逻辑：原代码左移时步长没有和鼠标偏移量正相关，鼠标越靠左滚动步长越大不符合交互直觉；修复后直接用鼠标距视口中心的偏移值乘速度系数，离中心越远滚动越快，符合主流边缘滚动交互逻辑
• 给鼠标跟随圆圈添加pointer-events: none，避免绝对定位的圆圈遮挡鼠标，导致下层元素无法触发事件
• 用textContent替代innerHTML更新鼠标数值，性能更好也避免XSS风险
• 窗口尺寸变化时可按需更新viewportWidth、windowCenterX、maxScrollLeft的值，适配窗口resize场景

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