鼠标滚轮让一个div横向滚动这个需求我估计做过后台管理系统、数据大屏或者卡片类页面的前端都绕不开。默认情况下鼠标滚轮只负责页面竖向滚动div里面内容一旦超出宽度你只能拖动滚动条或者按住Shift再滚轮体验实在谈不上顺手。这篇文章就把这个问题彻底讲透从最核心的wheel事件监听到顺滑滚动的手感优化再到循环渲染卡片时最后两个元素不加伪类的处理全部给出一套可以直接抄的写法。不管你是用原生JS、jQuery还是Vue/React核心思路都一样。我会把每个参数的作用解释清楚顺带把实际开发里容易踩的坑一并列出来。1. 先搞清需求横向滚动的三种实现路线怎么选1.1 浏览器默认行为为什么帮不上忙先把一个问题说透为什么div默认不能横向滚动。浏览器里鼠标滚轮产生的是WheelEvent这个事件里的deltaY表示纵向滚动量deltaX表示横向滚动量。对于普通鼠标滚轮来说转动滚轮只会产生纵向的deltaY横向的deltaX基本是0。而页面和容器的默认行为是把纵向滚动量交给外层滚动容器去处理。所以当你把一个div设置成overflow-x: auto之后它确实会出现横向滚动条但鼠标滚轮一滚浏览器只会去滚动整个页面这个div的横向滚动条纹丝不动。要么用户自己拖滚动条要么按住Shift键再滚轮浏览器才把纵向滚动量“翻译”给横向滚动条。这种原生行为在桌面上能用但问题很明显第一很多用户根本不知道Shift加滚轮这个操作第二在内网管理系统、大屏展示这类场景里用户通常就是一只鼠标走天下你不可能要求每个人都像开发一样熟练。1.2 几种方案的取舍不是非得写一堆代码针对让div横向滚动这件事我见过四种常见做法。第一种完全靠原生Shift加滚轮零代码但交互上不好被发现在触控板上更别扭基本只能用在内部工具里。第二种监听wheel事件手动把deltaY加到scrollLeft上。代码量小逻辑直观而且仍然使用浏览器原生滚动机制滚动条、锚点跳转、键盘操作这些都保留着。这是绝大多数场景里的最优解也是这篇文章的核心。第三种抛弃原生滚动用transform: translateX配合JS自己算位移做“伪滚动”。优势是自由度极高适合做无限循环轮播、复杂动效代价是拖拽、惯性、键盘焦点、可访问性全要自己实现工程量大普通列表滚动完全没必要这么折腾。第四种直接上第三方库比如better-scroll、OverlayScrollbars。功能全边界细节处理成熟但体积不小在React或Vue里还要封装一层样式也容易被库自带结构绑架。如果只是让列表滚起来自己写二十行代码就能搞定引库反而难受。四种路子没有绝对好坏我的建议很简单普通横向滚动列表优先自己监听wheel事件。十行代码能解决的事情别把复杂度引进来。下面直接把核心写法拆开讲。2. wheel事件监听鼠标滚轮数据怎么映射成横向位移2.1 最小可用的横向滚动写法先给一段最精简的代码它能让一个div在鼠标滚轮滚动时横向滑动。div classscroll-box idscrollBox div classitem卡片1/div div classitem卡片2/div div classitem卡片3/div div classitem卡片4/div div classitem卡片5/div /div.scroll-box { overflow-x: auto; white-space: nowrap; } .item { display: inline-block; width: 200px; height: 120px; margin-right: 16px; background: #f0f0f0; }const box document.getElementById(scrollBox); box.addEventListener(wheel, function (e) { if (Math.abs(e.deltaY) Math.abs(e.deltaX)) { e.preventDefault(); box.scrollLeft e.deltaY; } }, { passive: false });这里做了三件事。第一判断deltaY的绝对值是否大于deltaX目的是区分“滚轮竖向滚动”和“触控板水平滑动”。普通鼠标滚轮只有deltaY触控板双指横滑时deltaX会很大。如果用户本来就是水平滑动那就别拦着让浏览器原生处理横向滚动这样体验最自然。第二调用e.preventDefault()阻止这个wheel事件继续触发页面默认的竖向滚动。不然你div是滚了页面也跟着上下跳两个动作叠在一起就是灾难。第三把deltaY直接累加到scrollLeft上。滚动量是像素值正值表示滚轮向下scrollLeft增加内容往左移动符合常规直觉。2.2 deltaMode滚轮数据不一定是像素单位要换算这个坑很多新手没注意到。WheelEvent里的deltaY不一定是像素它的单位由deltaMode决定。deltaMode 0默认值单位是像素绝大多数鼠标滚轮都是这个模式。deltaMode 1单位是“行”。浏览器会把一次滚动当成滚动几行文本行高的标准值通常按16像素算。deltaMode 2单位是“页”。一次滚动就是一整页这个在部分键盘操作、特殊鼠标驱动下可能出现。直接拿deltaY往scrollLeft上加在像素模式下没问题但遇到行模式或者页模式就会滚得特别猛。稳妥写法是把单位统一换算成像素。box.addEventListener(wheel, function (e) { if (Math.abs(e.deltaY) Math.abs(e.deltaX)) return; let distance e.deltaY; if (e.deltaMode 1) { distance distance * 16; } else if (e.deltaMode 2) { distance distance * box.clientWidth; } e.preventDefault(); box.scrollLeft distance; }, { passive: false });这段代码把行模式乘16页模式乘容器宽度视觉上滚动量就正常了。实际项目里遇到页模式的概率很低但写过一次换算逻辑心里就踏实。2.3 passive: false少了这个参数preventDefault会失效我估计不少同学遇到过代码一模一样写在某个页面里就没反应控制台还刷警告。问题多半出在addEventListener的第三个参数上。现代浏览器出于性能优化把wheel、touchmove这些事件默认设置成了passive: true。passive意为“被动”表示“我承诺这个监听器里不会调用preventDefault”浏览器为了不阻塞滚动线程就直接忽略你的preventDefault调用。所以监听wheel事件想拦截默认行为第三个参数必须显式传{ passive: false }明确告诉浏览器“我要调用preventDefault”。如果不写或者写了true页面的竖向滚动就拦不住。这是整个方案里最常见的坑务必记住。3. 手感优化平滑滚动、边界放行与触控板兼容3.1 平滑滚动基础版够用但高速滚轮会露馅直接scrollLeft deltaY的写法在慢速滚动时没什么问题因为滚轮事件是连续触发的视觉上会跟着滚。但某些高分辨率滚轮、或者一次性滚出很大一个deltaY时会出现生硬的“跳格感”好像滚动条被使劲拽了一下。想让它顺滑有两个选择。第一个选择给容器加上scroll-behavior: smooth。一行CSS所有程序化的scrollLeft赋值都会自动过渡省事。但我不建议在横向滚动容器上用它原因有两个一是连续快速滚轮时浏览器会把多次赋值排队滚轮停了内容还在“追”延迟很重二是它会影响所有滚动操作包括你用scrollIntoView、锚点定位这些全部变成慢动作反而误伤。第二个选择用requestAnimationFrame自己做缓冲插值。这是更可控的做法。let targetScroll 0; let rafId null; box.addEventListener(wheel, function (e) { if (Math.abs(e.deltaY) Math.abs(e.deltaX)) return; e.preventDefault(); let distance e.deltaY; if (e.deltaMode 1) distance * 16; if (e.deltaMode 2) distance * box.clientWidth; targetScroll box.scrollLeft distance; targetScroll Math.max(0, Math.min(targetScroll, box.scrollWidth - box.clientWidth)); if (!rafId) { smoothStep(); } }, { passive: false }); function smoothStep() { const diff targetScroll - box.scrollLeft; if (Math.abs(diff) 0.5) { box.scrollLeft targetScroll; rafId null; return; } box.scrollLeft diff * 0.12; rafId requestAnimationFrame(smoothStep); }核心思路是记录一个目标滚动位置然后每一帧让scrollLeft向目标位置逼近当前差值的12%。这个系数越大越跟手越小越绵软。我个人喜欢0.1到0.15之间既有缓冲感又不拖沓。3.2 边界放行滚到最左和最右时让竖向滚动走人横向滚动容器一般不会单独一个div存在它通常嵌在页面里页面整体还是竖向内容。这里有个很微妙的交互当用户把横向容器滚到头了还继续滚轮往下走用户期望的下一步是什么答案是继续滚动页面。但如果你无脑拦截所有wheel事件横向容器顶在最左或最右用户就会觉得滚轮卡死了死活滚不动页面。这是很多横向滚动组件被人骂“难用”的根源。解决思路是加边界判断横向容器的scrollLeft到了0还往负方向滚或者到了最大滚动距离还往正方向滚就不调用preventDefault让事件冒泡给上层页面。box.addEventListener(wheel, function (e) { if (Math.abs(e.deltaY) Math.abs(e.deltaX)) return; const maxScroll box.scrollWidth - box.clientWidth; const atLeft box.scrollLeft 0 e.deltaY 0; const atRight box.scrollLeft maxScroll e.deltaY 0; if (atLeft || atRight) { return; } let distance e.deltaY; if (e.deltaMode 1) distance * 16; if (e.deltaMode 2) distance * box.clientWidth; e.preventDefault(); box.scrollLeft distance; }, { passive: false });判断条件里同时比较滚动方向和当前边界向左滚到0且还在向左滚说明该放行向右滚到最大值且还在向右滚同样放行。这样页面竖向滚动和div横向滚动就能无缝衔接。3.3 触控板兼容别把用户的双指横滑挤掉了笔记本触控板在横向滚动容器里有一个原生优势双指左右滑直接触发横向滚动手感跟手机上差不多。但你要是把wheel事件一杆子全拦截然后只处理deltaY触控板横滑时产生的deltaX就没人管、deltaY又误触结果就是斜着滚、乱跳。所以标准写法里必须加上方向判断if (Math.abs(e.deltaY) Math.abs(e.deltaX)) return;这句话的意思是当横向滚动量不小于纵向滚动量时把它当成水平手势交给浏览器原生反馈我不插手。只有明确是纵向滚轮动作时才做横向映射。另外再说一个少数情况Mac触控板的“自然滚动”方向跟Windows滚轮方向相反但deltaY符号本身已经反映了这个方向所以你不需要做任何特殊适配直接把符号交给scrollLeft即可。4. 实战场景循环卡片最后两个元素不加伪类怎么处理4.1 循环生成的卡片列表布局从哪儿开始做数据大屏、后台列表经常遇到这种情况接口返回一组卡片数据前端用document.createElement或模板循环把它们渲染出来每个卡片定宽、带右边距一行刚好放两个超出部分横向滚动。用原生JS循环生成的写法大概是const list document.getElementById(cardList); const data [1, 2, 3, 4, 5, 6, 7, 8]; data.forEach(function (item) { const card document.createElement(div); card.className card; card.textContent 卡片 item; list.appendChild(card); });CSS这边卡片正常加边距.card-list { display: flex; flex-wrap: nowrap; overflow-x: auto; } .card { flex: 0 0 auto; width: calc(50% - 12px); height: 100px; margin-right: 24px; background: #f5f5f5; }这里看似没问题但最后两个元素会多出一个24px的右边距在横向滚动容器里表现为末尾多出一段空白在网格布局里则会造成最后一行看起来缩进去一点点。4.2 最后两个元素不加伪类用nth-last-child精准命中热搜词里那句“一行两个如何算最后两个元素最后两个元素不加伪类”对应的正是这个问题。如果一行是两个卡片那最后一行可能是两个元素也可能不足两个。无论有几个最后两个元素都不该有右边距否则视觉上收不齐。直接用nth-last-child反向选中最后两个再配合:not()排除掉即可。.card:nth-last-child(-n 2) { margin-right: 0; }这行代码的意思是从最后一个往前数匹配倒数第1个和倒数第2个元素把它们的右边距清掉。反过来想如果你只想让“除最后两个之外”的元素加边距也可以写成.card:not(:nth-last-child(-n 2)) { margin-right: 24px; } .card { margin-right: 24px; }第二种写法是先把所有元素都加上边距再对最后两个清零。两种写法效果等价选一个顺手习惯的就行。如果要支持的是一行三个卡片改成:nth-last-child(-n 3)一行四个改成:nth-last-child(-n 4)。这个n从1开始递增配合负号表示“从末尾往回数的前几个”逻辑清晰记起来也方便。这里有一个关键点:nth-last-child是浏览器根据实际DOM位置动态计算的循环出来的列表增删元素后它会自动重新匹配。这比你在JS里算出“最后两个是第几个”再手动加class要可靠得多完全不需要JS参与。4.3 伪类选择器失效的两个常见原因实际项目里很多人反映:nth-last-child用了没效果排查下来基本是两个原因。第一个原因选择器不是作用在直接子元素上。:nth-last-child的计数基准是父元素的直接子元素如果你的卡片外面包了一层别的容器比如div classcard-list div classcard-wrapper div classcard.../div /div /div那.card:nth-last-child(-n 2)选中的是.card-wrapper.card本身不是.card-list的直接子元素匹配就直接失效。要么把伪类写在.card-wrapper上要么去掉中间这层包裹保证卡片就是列表的直接子元素。第二个原因滚动容器里用了其它定位方式导致子元素不是同一层级的兄弟关系。:nth-last-child只认兄弟节点如果列表里夹杂了分隔符、空白占位元素计数就会被干扰。保持卡片同级、同结构是关键。4.4 网格布局可以彻底绕开这个伪类如果你手头项目不需要用flex横向排而是类似“一行两个、自动换行”的网格那我建议直接上Grid上面这些伪类处理直接省掉。.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }Grid的gap是“缝隙”它只会出现在元素与元素之间不会像margin那样给最后一个元素“溢出”一段空间。每一行两个卡片自动对齐最后一行就算只有一个元素也不会在右侧留下突兀的空白。所以“最后两个不加伪类”本质上是margin方案的缓存问题Grid天然免疫。5. 完整Demo横向滚动容器可以直接抄的代码把前面讲的点揉到一起给一个能直接跑起来的完整示例。这个示例包含循环生成卡片、一行两个布局、最后两个元素清零右边距、鼠标滚轮横向滚动、边界放行、触控板横滑不做干扰。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title鼠标滚轮横向滚动Demo/title style body { font-family: sans-serif; height: 2000px; padding: 40px; background: #fafafa; } .card-list { display: flex; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 10px; scrollbar-width: thin; } .card-list::-webkit-scrollbar { height: 6px; } .card-list::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; } .card { flex: 0 0 auto; width: calc(50% - 12px); min-width: 320px; height: 160px; margin-right: 24px; border-radius: 8px; background: linear-gradient(135deg, #e8f0fe, #d7e6ff); display: flex; align-items: center; justify-content: center; font-size: 24px; color: #2c3e50; } .card:last-child, .card:nth-last-child(2) { margin-right: 0; } /style /head body div classcard-list idcardList/div script const list document.getElementById(cardList); const count 10; for (let i 1; i count; i) { const card document.createElement(div); card.className card; card.textContent 卡片 i; list.appendChild(card); } const maxScroll function () { return list.scrollWidth - list.clientWidth; }; list.addEventListener(wheel, function (e) { if (Math.abs(e.deltaY) Math.abs(e.deltaX)) { return; } const currentMax maxScroll(); const atLeft list.scrollLeft 0 e.deltaY 0; const atRight list.scrollLeft currentMax e.deltaY 0; if (atLeft || atRight) { return; } let distance e.deltaY; if (e.deltaMode 1) { distance * 16; } else if (e.deltaMode 2) { distance * list.clientWidth; } e.preventDefault(); list.scrollLeft distance; }, { passive: false }); /script /body /html这个Demo里的.card:last-child, .card:nth-last-child(2)是给最后两个元素清右边距的另一种写法跟:nth-last-child(-n 2)等价但更直观。body高度设置成2000px方便测试边界放行效果当横向容器滚到最右边继续滚轮页面会开始往下走。需要说明的是里面.card宽度用了calc(50% - 12px)配合min-width: 320px是为了让卡片在横向上两两排列容器宽度足够时一屏显示两个超出部分横向滚动。如果你不想要这个行为把min-width去掉、宽度固定成具体数值就行。6. 常见问题排查与踩坑实录6.1 问题速查表症状原因解决办法滚轮没反应div不横向滚动wheel事件监听器上没有传{ passive: false }加上第三参数确保preventDefault生效页面跟着上下滚动两个动作叠加wheel事件里没调用preventDefault或者事件没冒泡到监听容器在要拦截的分支里调用e.preventDefault()触控板横滑变成斜着滚没有区分deltaX和deltaY把横滑的deltaY也映射了加上Math.abs(e.deltaY) Math.abs(e.deltaX)判断后直接return滚动到底再也滚不动页面也不动无条件拦截wheel事件没有做边界放行用atLeft高速滚轮时滚动跳跃、卡顿每个事件直接秒级改scrollLeft没有缓冲用requestAnimationFrame做插值平滑最后两个卡片的右边距清不掉伪类作用对象不是列表的直接子元素或卡片外面包了额外容器检查HTML结构保证卡片是列表的直接子元素滚动条太丑影响布局原生滚动条样式与原设计不匹配用::-webkit-scrollbar隐藏或定制样式动态插入新卡片后滚动位置错乱scrollWidth变化了但scrollLeft没有同步校正在插入后重设scrollLeft为合理值或调用setTimeout读取新边界6.2 我实际踩过的三个坑逐一说明第一个坑是滚动容器里子元素有自己独立的wheel监听。比如每个卡片内部有一个用wheel做放大的图表图表监听了wheel且调用了stopPropagation那滚轮事件压根到不了外层卡片列表横向滚动完全失效。遇到这种结构要么放行卡片图表的wheel事件要么在图表内部处理完放大逻辑后手动触发外层滚动。从架构上考虑最简单的办法是让内层监听器不调用stopPropagation需要拦截时用preventDefault而不是阻断冒泡。第二个坑是Mac触控板滚动量与Windows滚轮差异巨大。Mac触控板轻轻一推deltaY可能只有几像素Windows滚轮则常常一次几十上百像素。统一用deltaY直接累加没问题但如果你做了平滑插值会发现Windows上滚得很猛、Mac上蠕虫爬。我的经验是不要把平滑系数写死给一个范围Windows取0.08到0.12Mac取0.15到0.2让视觉速度接近。第三个坑是动态内容宽度变化后scrollLeft越界。比如列表先有5个卡片你滚动到第5个然后接口又插入了新卡片。此时scrollWidth变大原来的scrollLeft虽然没变但视觉位置可能已经不是“最后”了。反过来如果内容变少比如卡片被删除scrollLeft可能超过新的最大值滚动条被卡在看不见的位置。解决办法是在数据变化后比较scrollLeft和scrollWidth - clientWidth超了就重置。function resetScrollPosition() { const max list.scrollWidth - list.clientWidth; if (list.scrollLeft max) { list.scrollLeft max; } }在一个MutationObserver或者每次数据更新后调用一下保险。6.3 扩展一点让滚动方式更顺手的小细节如果想让体验进一步提升可以给键盘左右方向键也加上滚动支持这在无障碍场景里很加分。list.addEventListener(keydown, function (e) { if (e.key ArrowRight) { e.preventDefault(); list.scrollLeft 80; } if (e.key ArrowLeft) { e.preventDefault(); list.scrollLeft - 80; } });需要注意keydown监听要让容器先获得焦点加tabindex0否则方向键事件不会落到它头上。隐藏滚动条也是一个常见需求很多设计稿根本不想看到原生滚动条。CSS里可以这样处理.card-list { overflow-x: auto; scrollbar-width: none; } .card-list::-webkit-scrollbar { display: none; }滚动能力还在只是视觉上看不到滚动条配合自绘的进度条或导航箭头界面干净很多。最后把我自己的习惯做法总结成一句话核心滚动逻辑保持简单能走原生就走原生别引库别过度封装边界放行、触控板兼容、平滑缓冲这三件事必须做做完你会发现横向滚动比原来好使太多。