前言
你好，我是喵喵侠。我最近遇到了一个问题，就是Vue页面我引入了一个列表组件，这个列表是可以单独滚动的。当我把鼠标移入，开始滚动操作时候，浏览器最右边的滚动条也会开始滚动。我尝试在@mousewheel.native这个事件，第一行加入e.stopPropagation()，发现还是没有作用，最外层的body还是可以滚动。针对这个问题，我花了点时间研究下，下面是原因分析和解决方法。
原因分析
e.stopPropagation() 只阻止事件在 JavaScript 中的冒泡传播，但它不会阻止浏览器对滚轮事件的默认处理行为。而浏览器的默认行为是，当一个滚动事件发生且子元素滚动到边界时（比如已经滚动到底部或顶部），事件会继续传递给父容器，最终传递到 body，导致页面的整体滚动。
解决方法
为了防止整个页面滚动（即 body 的滚动），你需要使用 e.preventDefault() 来阻止浏览器的默认行为。在 @mousewheel.native 事件处理程序中，添加对 e.preventDefault() 的调用即可。
代码示例如下：
代码语言：html复制<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() 来阻止，这个事件写在某个页面元素上不会影响该元素的正常滚动。这是个小问题，记录一下，方便下次遇到又忘记了。
