如何防止Vue页面局部元素滚动时，页面整体滚动？

前言

你好，我是喵喵侠。我最近遇到了一个问题，就是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() 来阻止，这个事件写在某个页面元素上不会影响该元素的正常滚动。这是个小问题，记录一下，方便下次遇到又忘记了。