如何让鼠标滚轮默认实现横向滚动
在网页开发场景中，默认情况下鼠标滚轮的滚动操作会触发页面的纵向滚动。如果页面需要实现横向滚动的交互效果，就需要通过事件监听和处理，将滚轮的纵向滚动行为转换为横向滚动，从而让鼠标滚轮默认实现横向滚动效果。下面将从原理、实现步骤和完整示例三个部分展开说明。
实现原理
鼠标滚轮滚动时，浏览器会触发wheel事件，该事件对象中包含deltaY（纵向滚动偏移量）和deltaX（横向滚动偏移量）属性：默认滚轮纵向滚动时，deltaY会返回非零值，deltaX通常为0。要实现横向滚动，我们只需要监听wheel事件，阻止默认的纵向滚动行为，再将deltaY的值赋给容器的横向滚动位置scrollLeft即可。
实现步骤
选择需要横向滚动的容器元素，为其添加
wheel事件监听在事件处理函数中，调用
preventDefault()方法阻止默认的纵向滚动行为获取事件对象的
deltaY值，将其加到容器的scrollLeft属性上，实现横向滚动根据实际需求，可添加滚动边界判断，避免滚动超出容器可滚动范围
完整代码示例
下面是一个可直接运行的完整示例，容器内部包含多个横向排列的卡片，鼠标在容器内滚动滚轮即可实现横向滚动：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标滚轮横向滚动示例</title>
<style>
.scroll-container {
width: 800px;
height: 200px;
border: 1px solid #ccc;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
padding: 10px;
}
.card {
display: inline-block;
width: 150px;
height: 180px;
margin-right: 15px;
background-color: #f0f0f0;
border: 1px solid #ddd;
border-radius: 8px;
text-align: center;
line-height: 180px;
font-size: 20px;
color: #333;
}
</style>
</head>
<body>
<h3>鼠标在下方容器滚动滚轮，即可实现横向滚动</h3>
<div class="scroll-container" id="scrollContainer">
<div class="card">卡片1</div>
<div class="card">卡片2</div>
<div class="card">卡片3</div>
<div class="card">卡片4</div>
<div class="card">卡片5</div>
<div class="card">卡片6</div>
<div class="card">卡片7</div>
<div class="card">卡片8</div>
</div>
<script>
const scrollContainer = document.getElementById('scrollContainer');
scrollContainer.addEventListener('wheel', (e) => {
// 阻止默认纵向滚动行为
e.preventDefault();
// 将纵向滚动偏移量转换为横向滚动偏移量
// deltaY为正表示向下滚动，对应容器向右滚动，scrollLeft增加
// deltaY为负表示向上滚动，对应容器向左滚动，scrollLeft减少
scrollContainer.scrollLeft += e.deltaY;
});
</script>
</body>
</html>注意事项
使用
wheel事件时，必须调用preventDefault()才能阻止默认纵向滚动，否则会出现纵向和横向同时滚动的异常效果不同浏览器的
deltaY返回值可能存在差异，部分浏览器可能返回较大的数值，可根据需求对deltaY做缩放处理，例如scrollContainer.scrollLeft += e.deltaY * 0.5调整滚动速度如果页面中存在多个需要横向滚动的容器，可封装通用的事件处理函数，避免重复编写逻辑