鼠标拖拽横向滚动Canvas：window.scrollWidth为undefined，求最大滚动值

嘿，我一眼就揪出问题所在了——window.scrollWidth返回undefined是因为scrollWidth是DOM元素的专属属性，window对象根本没有这个属性！你得从文档根元素或者body元素来获取整个页面的滚动宽度。

核心问题分析 #

你想要的“最大滚动距离”，本质是整个文档的宽度减去浏览器窗口的可视宽度，正确的计算方式应该是：

const maxScrollX = document.documentElement.scrollWidth - window.innerWidth;

如果习惯用jQuery，也可以写成：

const maxScrollX = $(document).width() - $(window).width();

优化后的完整代码 #

我不仅修复了滚动宽度的问题，还优化了拖拽逻辑（原来的previousPos累积方式容易出现误差），现在的代码更稳定准确：

let isMouseDown = false;
let startX = 0;
let startScrollLeft = 0;

// 绑定事件
document.addEventListener("mousedown", handleMouseDown);
document.addEventListener("mouseup", handleMouseUp);
document.addEventListener("mousemove", handleMouseMove);

function handleMouseDown(event) {
  isMouseDown = true;
  // 记录按下时的鼠标位置和当前滚动位置
  startX = event.clientX;
  startScrollLeft = window.scrollX || document.documentElement.scrollLeft;
}

function handleMouseUp() {
  isMouseDown = false;
}

function handleMouseMove(event) {
  if (!isMouseDown) return;

  // 计算鼠标移动的偏移量
  const deltaX = event.clientX - startX;
  // 计算目标滚动位置
  let targetScrollLeft = startScrollLeft - deltaX;

  // 限制滚动范围在0到最大滚动距离之间
  const maxScrollX = document.documentElement.scrollWidth - window.innerWidth;
  targetScrollLeft = Math.max(0, Math.min(targetScrollLeft, maxScrollX));

  // 执行滚动
  window.scrollTo(targetScrollLeft, 0);
}

关键优化点说明 #

• 拖拽逻辑优化：不再用累积previousPos的方式，而是在鼠标按下时记录初始位置，每次移动计算相对偏移，避免多次拖拽后的误差累积。
• 滚动范围限制：直接通过Math.max和Math.min把滚动位置限制在合法范围内，不需要额外的checkScrollbar函数，代码更简洁。
• 原生API替代：用window.scrollX（或document.documentElement.scrollLeft）和window.innerWidth替代jQuery的方法，减少依赖同时提升性能。

如果坚持要保留原来的checkScrollbar函数，也可以修改成这样：

function checkScrollbar() {
  const currentScrollLeft = window.scrollX || document.documentElement.scrollLeft;
  const maxScrollX = document.documentElement.scrollWidth - window.innerWidth;
  
  if (currentScrollLeft >= maxScrollX) {
    return "right";
  } else if (currentScrollLeft <= 0) {
    return "left";
  }
  return "safe";
}

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