如何将垂直滚轮滚动转为水平滚动 适配旋转90度的横向网站

你的代码无法正常运行主要是两个基础问题：

• 变量未声明：直接使用site-content、scrollableElement作为变量，没有提前获取对应的DOM元素，浏览器无法识别变量，事件监听不会生效
• 滚动逻辑和现有CSS不匹配：你已经通过旋转将.site-content的垂直滚动映射为页面的水平滚动效果，此时应该操作.site-content的scrollTop属性，而非scrollLeft

1. 先调整冗余CSS属性 #

你已经将滚动逻辑全部交由.site-content处理，不需要再给body、html设置横向滚动，避免出现多余滚动条：

/* 替换原有body、html的样式 */
body, html { 
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* 可选：给.site-content新增滚动平滑属性，提升滚动体验 */
.site-content{
  /* 原有属性不变，新增下面这行 */
  scroll-behavior: smooth;
}

2. 替换为修正后的JavaScript代码 #

// 先获取.site-content对应的DOM节点
const siteContent = document.querySelector('.site-content');

// 绑定滚轮事件
siteContent.addEventListener('wheel', (ev) => {
  ev.preventDefault();
  // 滚轮滚动量直接映射为.site-content的垂直滚动，对应页面横向滚动效果
  siteContent.scrollTop += ev.deltaY;
});

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