水平布局网页实现横向拖拽滚动功能的JS代码问题咨询

问题根源 #

1. 事件绑定和操作的容器错误：你当前实现横向滚动的逻辑是靠旋转.outer-wrapper实现竖向滚动转横向展示，实际拥有滚动属性、产生滚动位移的是.outer-wrapper而非.wrapper，你给.wrapper设置scrollLeft自然不会生效。
2. 坐标计算逻辑错误：容器旋转了-90度后，鼠标的水平位移对应实际的竖向滚动偏移，原有基于pageX的计算逻辑完全不匹配。
3. CSS属性配置错误：.outer-wrapper需要开启竖向滚动，.wrapper不需要设置overflow: hidden。

修正方案 #

1. 调整CSS

仅修改以下两个选择器的属性即可，其余样式保留不变：

.outer-wrapper {
  width: 100vh;
  height: 100vw;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
  overflow-y: auto; /* 将原有的overflow-x:hidden替换为这个属性 */
  overflow-x: hidden;
  position: absolute;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.wrapper {
  display: flex;
  flex-direction: row;
  width: 400vw;
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
  /* 删除原有的overflow: hidden属性 */
  cursor: pointer;
}

2. 替换JS逻辑

const scrollContainer = document.querySelector('.outer-wrapper');
const slider = document.querySelector('.wrapper');
let isDown = false;
let startY;
let scrollTop;

scrollContainer.addEventListener('mousedown', (e) => {
  isDown = true;
  slider.classList.add('active');
  startY = e.pageY - scrollContainer.offsetTop;
  scrollTop = scrollContainer.scrollTop;
});

scrollContainer.addEventListener('mouseleave', () => {
  isDown = false;
  slider.classList.remove('active');
});

scrollContainer.addEventListener('mouseup', () => {
  isDown = false;
  slider.classList.remove('active');
});

scrollContainer.addEventListener('mousemove', (e) => {
  if(!isDown) return;
  e.preventDefault();
  const y = e.pageY - scrollContainer.offsetTop;
  const walk = (y - startY) * 3;
  scrollContainer.scrollTop = scrollTop - walk;
});

修改后即可正常实现按住拖拽横向滚动的效果，原有的常规滚动功能也不会受影响。

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