js+css 页面鼠标横向滚动

在JavaScript和CSS中，创建页面水平滚动通常需要使用`<div>`元素并应用一些CSS样式以及JavaScript事件监听。以下是简单的步骤：

1. HTML部分：

<div id="scrollable-content" class="horizontal-scroll">
   <!-- 你的内容 -->
</div>

2. CSS部分：

.horizontal-scroll {
   overflow-x: auto; /* 允许水平滚动 */
   white-space: nowrap; /* 防止文本换行 */
   -ms-overflow-style: none; /* 移除IE下滚动条 */
}

3. JavaScript部分（可选，用于处理滚轮事件）：

document.getElementById('scrollable-content').addEventListener('mousewheel', function(event) {
   event.preventDefault(); // 阻止默认的垂直滚动
   this.scrollLeft -= (event.wheelDelta || -event.detail); // 水平滚动
});

这样，当你在页面上横向滚动鼠标滚轮时，`scrollable-content`区域就会水平滚动显示内容。