前言
你好，我是喵喵侠。我最近遇到了一个问题，就是Vue页面我引入了一个列表组件，这个列表是可以单独滚动的。当我把鼠标移入，开始滚动操作时候，浏览器最右边的滚动条也会开始滚动。我尝试在@mousewheel.native这个事件，第一行加入e.stopPropagation()，发现还是没有作用，最外层的body还是可以滚动。针对这个问题，我花了点时间研究下，下面是原因分析和解决方法。
原因分析
e.stopPropagation() 只阻止事件在 JavaScript 中的冒泡传播，但它不会阻止浏览器对滚轮事件的默认处理行为。而浏览器的默认行为是，当一个滚动事件发生且子元素滚动到边界时（比如已经滚动到底部或顶部），事件会继续传递给父容器，最终传递到 body，导致页面的整体滚动。
解决方法
为了防止整个页面滚动（即 body 的滚动），你需要使用 e.preventDefault() 来阻止浏览器的默认行为。在 @mousewheel.native 事件处理程序中，添加对 e.preventDefault() 的调用即可。
代码示例如下：
<template> <div class="scrollable-element" @mousewheel.native="handleScroll"> <!-- 子元素内容 --> </div> </template> <script> export default { methods: { handleScroll(e) { e.preventDefault(); // 阻止浏览器默认行为（即防止页面滚动） // 其他滚动处理逻辑 } } } </script> <style> .scrollable-element { max-height: 300px; overflow-y: auto; } </style>
扩展知识
preventDefault() 的其他作用
e.preventDefault() 除了可以阻止默认的浏览器滚动事件外，还可以用来阻止某些元素的默认行为。例如：
- 阻止表单提交：如果你在表单的提交事件中调用
e.preventDefault()，那么表单不会被提交。 - 阻止链接跳转：点击
<a>标签时，浏览器会跳转到href属性指定的地址。调用e.preventDefault()可以阻止这种跳转。 - 阻止鼠标右键菜单：通常点击鼠标右键会弹出浏览器的上下文菜单。你可以使用
e.preventDefault()来阻止这种行为。
preventDefault() 与 return false的区别
虽然在某些情况下，return false 也能阻止默认行为，但它还会停止事件传播，也就是事件里面，这一行后面的语句都不执行了。而e.preventDefault() 仅仅阻止默认行为，而不阻止事件传播。
总结
浏览器的滚动事件需要用preventDefault() 来阻止，这个事件写在某个页面元素上不会影响该元素的正常滚动。这是个小问题，记录一下，方便下次遇到又忘记了。
