基于鼠标位置的页面自动滚动仅在鼠标移动时生效的解决需求

嘿，我懂你的困扰——原来的代码靠mousemove事件触发滚动，鼠标一停滚动就断档，体验确实不太顺畅。咱们可以通过拆分鼠标位置记录与滚动执行逻辑来解决这个问题，具体方案如下：

核心问题拆解 #

你的原代码只有在鼠标移动时才会触发scrollTop/scrollLeft的更新，鼠标静止时没有事件驱动，滚动自然就停了。所以我们需要把逻辑拆成两部分：

• 用mousemove事件实时记录当前鼠标坐标
• 用浏览器原生的requestAnimationFrame（比setInterval更流畅的动画API）持续根据记录的坐标计算滚动量

修改后的完整代码 #

// 初始化鼠标位置为窗口中心，避免页面加载时突然滚动
let mouseX = $(window).width() / 2;
let mouseY = $(window).height() / 2;

// 监听鼠标移动，实时更新存储的坐标
$(document).mousemove(function(e) {
  mouseX = e.clientX;
  mouseY = e.clientY;
});

// 用requestAnimationFrame持续执行滚动逻辑
function autoScroll() {
  const windowHeight = $(window).height();
  const windowWidth = $(window).width();
  
  // 计算Y轴滚动增量：鼠标偏离窗口中心的距离乘以控制系数
  const yDelta = (mouseY - windowHeight / 2) * 0.02;
  // 计算X轴滚动增量
  const xDelta = (mouseX - windowWidth / 2) * 0.02;
  
  // 更新页面滚动位置
  $('html, body').scrollTop(function(i, currentTop) {
    return currentTop + yDelta;
  }).scrollLeft(function(i, currentLeft) {
    return currentLeft + xDelta;
  });
  
  // 循环调用，保持持续滚动
  requestAnimationFrame(autoScroll);
}

// 启动自动滚动逻辑
autoScroll();

关键细节说明 #

• 鼠标位置存储：用全局变量mouseX/mouseY保存当前鼠标坐标，不管鼠标动没动，循环逻辑都能拿到最新位置
• requestAnimationFrame：浏览器会在每次重绘前调用这个函数，滚动动画会更贴合浏览器的刷新节奏，不会出现定时器的卡顿问题
• 初始位置设置：把鼠标初始位置设为窗口中心，这样页面加载时不会突然滚动，用户移动鼠标后才会开始跟随滚动

这样修改后，不管鼠标是移动状态还是静止状态，页面都会根据当前鼠标位置持续平滑滚动啦！

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