拖拽滚动：水平滚动已实现，垂直滚动无法工作，求排查

你的垂直滚动失效主要可能是两个原因：

1. 元素没有垂直滚动空间 #

首先检查.genealogy-body的CSS设置：

• 必须设置固定高度/最大高度（比如height: 400px或max-height: 100vh）
• 必须开启垂直滚动：overflow-y: auto（或overflow-y: scroll）
• 内部内容的高度必须超过元素自身的高度，这样才会出现垂直滚动条，scrollTop属性才会生效。

如果内容高度没超出元素，拖拽垂直方向自然不会有任何反应。

2. 鼠标坐标计算存在误差 #

你用e.pageX - slider.offsetLeft和e.pageY - slider.offsetTop计算鼠标在元素内的位置，当元素的父级有定位（position: relative/absolute/fixed）时，offsetLeft/offsetTop的计算会基于父级元素，导致坐标偏差，垂直方向的计算误差会直接影响scrollTop的更新。

修复后的代码 #

直接使用e.offsetX和e.offsetY（鼠标相对于当前元素的坐标）来替代原有计算，更准确且简洁：

const slider = document.querySelector('.genealogy-body');
let mouseDown = false;
let startX, scrollLeft;
let startY, scrollTop;

const startDragging = function (e) {
  mouseDown = true;
  startX = e.offsetX; // 直接取鼠标在元素内的X坐标
  scrollLeft = slider.scrollLeft;
  startY = e.offsetY; // 直接取鼠标在元素内的Y坐标
  scrollTop = slider.scrollTop;
};

const stopDragging = function () {
  mouseDown = false;
};

slider.addEventListener('mousemove', (e) => {
  e.preventDefault();
  if (!mouseDown) return;

  // 水平滚动
  const scrollX = e.offsetX - startX;
  slider.scrollLeft = scrollLeft - scrollX;

  // 垂直滚动
  const scrollY = e.offsetY - startY;
  slider.scrollTop = scrollTop - scrollY;
});

// 绑定事件
slider.addEventListener('mousedown', startDragging);
slider.addEventListener('mouseup', stopDragging);
slider.addEventListener('mouseleave', stopDragging);

额外验证点 #

如果修复后垂直滚动还是没反应，打开浏览器控制台，手动执行slider.scrollTop = 100，如果元素滚动了，说明代码逻辑没问题，还是内容高度不够的问题；如果没滚动，检查元素的overflow-y是否被其他CSS覆盖，或者元素是否有pointer-events: none之类的属性阻止了鼠标事件。

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