layui tab 标题栏默认不支持鼠标滚轮横向滚动，需为 .layui-tab-title 添加 overflow-x: auto、white-space: nowrap，并绑定 wheel 事件监听，阻止默认行为后通过 e.deltay 修改 scrollleft 实现左右滑动。
Layui 默认的 Tab 标题栏（.layui-tab-title）是横向排列的 <li> 列表，但容器本身不启用原生横向滚动，也没有监听鼠标滚轮事件来驱动水平滑动。因此，直接用鼠标中键滚轮无法左右滚动 Tab 标签栏——这是常见痛点，尤其当标签数量多、宽度超出可视区域时。
要实现「鼠标滚轮横向滚动 Tab 栏」，核心思路是：给标题容器加 overflow-x: auto，禁用默认垂直滚动，并主动捕获 wheel 事件，阻止默认行为后手动修改 scrollLeft。
✅ 正确做法：为 .layui-tab-title 启用横向滚动 + 滚轮控制
1. 确保标题容器可横向滚动
<div class="layui-tab">
<ul class="layui-tab-title" style="overflow-x: auto; white-space: nowrap; padding-bottom: 2px;">
<li class="layui-this">首页</li>
<li>用户管理</li>
<li>权限配置</li>
<li>日志中心</li>
<!-- 更多 tab ... -->
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">首页内容</div>
<div class="layui-tab-item">用户管理内容</div>
<!-- ... -->
</div>
</div>
-
overflow-x: auto是关键，让容器支持横向滚动条（仅在内容超宽时出现）； -
white-space: nowrap防止<li>换行，保证所有标签排成一行； -
padding-bottom: 2px是小技巧：避免滚动条被底部边框遮挡或触发双滚动条。
⚠️ 注意：不要对
.layui-tab-title设置固定高度（如height: 40px），否则会触发overflow-y: hidden干扰横向滚动。
2. 绑定 wheel 事件，实现滚轮横向滚动
在 Tab 渲染完成（或 DOM 就绪）后执行：
layui.use('element', function(){
const $ = layui.jquery;
const titleEl = $('.layui-tab-title');
titleEl.on('wheel', function(e) {
e.preventDefault(); // 阻止默认垂直滚动
this.scrollLeft += e.deltaY; // deltaY > 0 表示向下滚 → 向右滑；反之向左
});
});
-
e.deltaY在大多数浏览器中，滚轮向下为正值，对应向右滚动（符合直觉）； - 不依赖
deltaX，因多数鼠标滚轮只产生deltaY，且deltaX在 macOS 触控板上才稳定； -
preventDefault()必须加，否则页面会跟着上下滚动。
3. （可选）增强体验：平滑滚动 + 节流
titleEl.on('wheel', function(e) {
e.preventDefault();
const delta = e.deltaY;
this.scrollTo({
left: this.scrollLeft + delta,
behavior: 'smooth' // 浏览器原生平滑，兼容性 OK（Chrome/Firefox/Edge ≥ 2022）
});
});
✅
behavior: 'smooth'在现代浏览器中表现良好；若需兼容旧版，可用requestAnimationFrame手动做缓动。
❌ 常见错误避坑
-
错把事件绑在
.layui-tab或body上：必须精确绑定到.layui-tab-title容器，否则scrollLeft修改无效； -
未加
white-space: nowrap：标签自动换行，scrollLeft失效； -
容器父级有
overflow: hidden：检查.layui-tab或更高层是否意外截断了溢出内容； -
使用
e.deltaX为主判断：普通鼠标滚轮几乎不触发deltaX，会导致无响应。
? 补充：Tab 标题过长时的友好处理
如果单个 tab 标题文字太长（如“系统管理-用户权限分配-角色绑定配置”），建议：
- CSS 截断加省略号：
.layui-tab-title li { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - 鼠标悬停显示完整 title：
- 系统管理...
这样配置后，用户即可用鼠标滚轮自然地左右滑动 Tab 标题栏，无需拖拽滚动条，体验接近原生应用。
