我们经常遇到一种情况。当滑动 滚动 条区域时， 子元素 滚动 条到底部或顶部时就会触发 父 级 滚动 条， 父 级 滚动 条同理会继续向上触发，直至body容器。这是浏览器默认的 滚动 行为。 但是很多情况，我们想要 子元素 滚动 完成后，不触发 父 元素的 滚动 ，比如 modal、侧边栏 等等。 详细文档 & 例子 Document & Demo vue -... 当我们在使用 vue 的时候,可能会遇到当你在 父 组件上调用了其他子组件的时候,这个子组件明明不应该有 滚动 条,却显示了 滚动 条,而且上下拖动还会 影响 父 组件的 滚动 条,这对网页的实际使用产生了不好的 影响 楼主的情况 有一个命名为a的 父 组件 <template> <detail-banner></detail-banner... <div class="container" @scroll="handleScroll"> <div class="content"></div> <div class="float-element" :class="{ 'float': isFloating }"></div> </template> <script> import { ref } from ' vue '; export default { setup() { const isFloating = ref(false); const handleScroll = (event) => { const scrollTop = event.target.scrollTop; if (scrollTop > 100) { // 判断 滚动 距离是否大于100px isFloating.value = true; // 让DOM元素浮动 } else { isFloating.value = false; // 取消DOM元素浮动 return { isFloating, handleScroll, </script> <style> .container { position: relative; height: 400px; overflow-y: scroll; .content { height: 1000px; .float-element { position: absolute; top: 120px; left: 50%; transform: translateX(-50%); width: 100px; height: 100px; background-color: #ccc; transition: all 0.3s ease-in-out; .float { top: 20px; background-color: red; </style> 在上面的代码中，我们通过`@scroll`事件监听 滚动 事件，并在`handleScroll`函数中计算 滚动 距离，然后根据 滚动 距离的大小来决定是否让DOM元素浮动。 当 滚动 距离大于100px时，我们通过`isFloating`变量来控制DOM元素的`float`属性，实现让DOM元素浮动的效果。注意，这里使用了 Vue 3中的`ref`函数来创建响应式变量`isFloating`。