使用 HTML、CSS 和 JavaScript 实现水平鼠标滚动
我最近发现了一个很棒的 HTML5 模板，它支持水平鼠标滚动。我不确定他们是怎么实现的，所以与其费力去研究，不如像任何一个有自尊的程序员一样，我决定自己想出一个“更好的方法”。
您可以自行判断结果！
现在，励志故事讲完了，接下来我将介绍我的做法。点击此处查看示例。
首先是HTML代码。你需要一个外部容器元素，一个内部容器元素，然后你的内容将放在这个内部容器中。
HTML 代码
<div class="outercontainer" id=""scrl1>
<div class="innercontainer">
<div class="item">I</div>
<div class="item">Used</div>
<div class="item">To</div>
<div class="item">Rule</div>
<div class="item">The</div>
<div class="item">World</div>
<div class="item">Seas</div>
<div class="item">Would</div>
<div class="item">Rise</div>
<div class="item">When</div>
<div class="item">I</div>
</div>
</div>
其次是 CSS。这里需要注意的是，如果视口可滚动，那么默认情况下，滚动鼠标滚轮时页面会垂直滚动。为了避免这种情况，只需确保所有内容垂直方向都适合视口即可。然后，我们将外部容器设置为可滚动，内部容器设置为不可滚动。我们还隐藏了滚动条，这样除非使用触摸设备，否则无法手动滚动。
CSS 代码
.outercontainer{
width: 96%;
background-color: black;
min-height: 96vh;
margin: 0 auto;
overflow-x: scroll;
position: relative;
scrollbar-width: none;
-ms-overflow-style: none;
}
.outercontainer::-webkit-scrollbar { display: none;}
.innercontainer {
width: fit-content;
box-sizing: border-box;
padding: 24px 48px;
height: 85vh;
background-color: black;
display: flex;
flex-flow: row;
justify-content: flex-start;
align-items: center;
}
.item {
width: 269px;
height: 96%;
background-color: white;
box-sizing: border-box;
padding-top: 6.69%;
margin-right: 24px;
text-align: center;
font-size: large;
font-weight: bold;
}
.item:last-child{
margin-right: 0px;
}
最后是 JavaScript 部分。我们将所有函数都封装在`window.onload`中，以确保 HTML 在脚本启动前加载完毕。然后，我们将文档的 ` onwheel`事件分配给自定义的滚动函数。每次事件发生（滚轮滚动）时，我们的函数都会被调用。接着，我们读取事件的 `deltaY` 值。如果该值为负，则滚轮向下滚动；如果为正，则滚轮向上滚动。我们使用一个简单的 `if` 语句来相应地控制容器的左右滚动。
JavaScript 代码 - 客户端
window.onload = () => {
document.onwheel = customScrollFunction;
function customScrollFunction(event){
let deltaY = event.deltaY;
let deltaYSign = Math.sign(deltaY);
if(deltaYSign==-1){
document.getElementById("scrl1").scrollBy({
top: 0,
left: -169,
behavior: 'auto'
});
}else{
document.getElementById("scrl1").scrollBy({
top: 0,
left: 169,
behavior: 'auto'
});
}
}
}