如何实现按住鼠标左键时页面按指数曲线加速向下滚动

一、基础模拟鼠标滚轮滚动 #

基于游戏开发的帧更新思维，用requestAnimationFrame实现平滑的滚动帧循环，参数完全量化可控：

• 量化参数定义：
  • 初始滚动步长：baseStep = 5（对应0-100的基础力度）
  • 滚动帧率：跟随浏览器默认60fps（约16.67ms/帧，和游戏帧逻辑对齐）
• 实现代码：

// 模拟鼠标滚轮滚动的函数
function simulateWheelScroll(duration = 2000) {
  const baseStep = 5; // 基础滚动步长（量化值5）
  const startTime = performance.now();
  
  function scrollFrame(currentTime) {
    const elapsed = currentTime - startTime;
    if (elapsed < duration) {
      // 每帧向下滚动baseStep像素
      window.scrollBy(0, baseStep);
      requestAnimationFrame(scrollFrame);
    }
  }
  
  requestAnimationFrame(scrollFrame);
}

// 调用示例：启动2秒的模拟滚轮滚动
// simulateWheelScroll();

二、按住鼠标左键的指数曲线加速滚动 #

采用游戏中常见的指数加速度模型，将速度增长、上限、减速全部量化为0-100的可控参数：

• 量化参数核心定义：
  • 初始速度：baseSpeed = 5（对应0初始状态）
  • 加速度系数：accFactor = 1.05（每帧速度乘以1.05，对应5%的增长幅度，量化为5）
  • 最大速度上限：maxSpeed = 100（对应100的峰值，防止速度溢出）
  • 减速系数：decFactor = 0.9（松开左键后每帧速度衰减10%，量化为10）
• 完整实现代码：

// 全局状态变量（游戏开发风格的状态管理）
let isScrolling = false;
let currentSpeed = 0;
const baseSpeed = 5;       // 初始速度（量化值5）
const accFactor = 1.05;    // 指数加速度系数（每帧增长5%）
const maxSpeed = 100;      // 最大速度上限（量化值100）
const decFactor = 0.9;     // 减速系数（每帧衰减10%）

// 帧循环更新滚动逻辑
function updateScroll() {
  if (isScrolling) {
    // 指数加速：速度 = 当前速度 * 加速度系数，不超过最大值
    currentSpeed = Math.min(currentSpeed * accFactor, maxSpeed);
    // 初始状态下直接赋予基础速度
    if (currentSpeed < baseSpeed) currentSpeed = baseSpeed;
  } else {
    // 指数减速：速度 = 当前速度 * 减速系数，低于基础速度后重置
    currentSpeed = Math.max(currentSpeed * decFactor, 0);
    if (currentSpeed < baseSpeed) currentSpeed = 0;
  }
  
  // 应用当前速度到页面滚动
  if (currentSpeed > 0) {
    window.scrollBy(0, currentSpeed);
  }
  
  // 持续帧循环
  requestAnimationFrame(updateScroll);
}

// 绑定鼠标事件控制滚动状态
document.addEventListener('mousedown', () => {
  isScrolling = true;
});

document.addEventListener('mouseup', () => {
  isScrolling = false;
});

document.addEventListener('mouseleave', () => {
  isScrolling = false;
});

// 启动帧循环
requestAnimationFrame(updateScroll);

关键逻辑说明 #

1. 指数加速模型：currentSpeed = currentSpeed * accFactor 符合指数曲线增长，和游戏中角色加速逻辑完全一致，量化系数可直接调整增长幅度；
2. 状态控制：通过isScrolling开关控制加速/减速状态，和游戏中的输入监听逻辑对齐；
3. 边界处理：设置maxSpeed防止滚动速度过快，减速阶段通过decFactor平滑回落，避免突兀停止。

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