拖拽滚动Grid布局元素：上下滚动正常，左右滚动失效问题排查

1. CSS容器宽度与内容溢出问题 #

你的.bottom容器设置了width: 150vw，而Grid布局的5列子项每列宽度固定为200px，总宽度为1000px。当视口宽度大于约667px时，150vw的容器宽度会超过内容总宽度，导致Grid内容完全容纳在容器内，没有横向溢出空间，自然无法触发横向滚动。

2. JavaScript横向滚动逻辑错误 #

mousemove事件中的横向滚动逻辑方向完全颠倒：

• 鼠标向右移动（event.movementX > 0）时，代码执行scrollLeft -= movementX，会让scrollLeft值减小，与“拖拽右移查看左侧内容”的预期相反；
• 重复的if判断冗余，且未正确匹配滚动方向。

修改CSS #

调整容器宽度和Grid列定义，确保内容横向溢出容器：

body {
  background: #046;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.bottom {
  width: 100vw; /* 改为视口宽度，确保内容容易溢出 */
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(5, 200px); /* 明确列宽，避免auto自适应导致总宽度不足 */
  overflow: hidden; /* 隐藏原生滚动条，保留拖拽滚动逻辑 */
  user-select: none;
}

.yellow {
  background: yellow;
}

.white {
  background: white;
}

.div {
  height: 200px;
  width: 200px;
}

修改JavaScript #

修正横向滚动逻辑，简化代码并保证方向正确：

var element = document.getElementById('bottom');

element.addEventListener("mousemove", function(event) {
  if (event.buttons === 1) {
    if (Math.abs(event.movementX) > Math.abs(event.movementY)) {
      // 横向滚动：鼠标移动方向与scrollLeft变化方向一致
      element.scrollLeft += event.movementX;
    } else {
      // 纵向滚动：保持原有逻辑（原纵向逻辑方向正确）
      element.scrollTop += event.movementY;
    }
  }
});

如果不需要区分滚动方向优先级，也可以直接同时处理横纵向拖拽：

var element = document.getElementById('bottom');

element.addEventListener("mousemove", function(event) {
  if (event.buttons === 1) {
    element.scrollLeft += event.movementX;
    element.scrollTop += event.movementY;
  }
});

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