Vue v-on:scroll.passive的理解

Vue官网教程中,说明了新属性.passive将启动被动监听器,即默认行为会理解触发。我的理解是我可以在onSroll事件中写个循环事件,然后如果快速滚动的过程不会受到onSroll内事件的阻塞。



<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>


所以我这样写:





    <div id="example-5" v-on:scroll.passive="onScroll" style="width: 300px;height: 300px;border: 4px solid red;overflow: scroll;">
        sou la xi xi xi xi la xi la sou 吹着前奏望着天空 我想起花瓣试着掉落 为你翘课的那一天 花落的那一天 教室的那一间 我怎么看不见 消失的下雨天 我好想再淋一遍 没想到失去的勇气我还留着 好想再问一遍 你会等待还是离开
        刮风这天我试过握着你手 但偏偏雨渐渐大到我看你不见 还要多久我才能在你身边 还要多久我才能够在你身边 等到放晴的那天也许我会比较好一点 等到放晴那天也许我会比较好一点 从前从前有个人爱你很久 但偏偏风渐渐把距离吹得好远 偏偏风渐渐把距离吹得好远
        但偏偏雨渐渐把距离吹得好远 好不容易又能再多爱一天 但故事的最后你好像还是说了拜拜 但故事的最后你好像还是说了 sou la xi xi xi xi la xi la sou 吹着前奏望着天空 我想起花瓣试着掉落 为你翘课的那一天
        花落的那一天 教室的那一间 我怎么看不见 消失的下雨天 我好想再淋一遍 没想到失去的勇气我还留着 好想再问一遍 你会等待还是离开 刮风这天我试过握着你手 但偏偏雨渐渐大到我看你不见 还要多久我才能在你身边 还要多久我才能够在你身边
        等到放晴的那天也许我会比较好一点 等到放晴那天也许我会比较好一点 从前从前有个人爱你很久 但偏偏风渐渐把距离吹得好远 偏偏风渐渐把距离吹得好远 但偏偏雨渐渐把距离吹得好远 好不容易又能再多爱一天 但故事的最后你好像还是说了拜拜
        但故事的最后你好像还是说了 sou la xi xi xi xi la xi la sou 吹着前奏望着天空 我想起花瓣试着掉落 为你翘课的那一天 花落的那一天 教室的那一间 我怎么看不见 消失的下雨天 我好想再淋一遍 没想到失去的勇气我还留着
        好想再问一遍 你会等待还是离开 刮风这天我试过握着你手 但偏偏雨渐渐大到我看你不见 还要多久我才能在你身边 还要多久我才能够在你身边 等到放晴的那天也许我会比较好一点 等到放晴那天也许我会比较好一点 从前从前有个人爱你很久 但偏偏风渐渐把距离吹得好远
        偏偏风渐渐把距离吹得好远 但偏偏雨渐渐把距离吹得好远 好不容易又能再多爱一天 但故事的最后你好像还是说了拜拜 但故事的最后你好像还是说了 sou la xi xi xi xi la xi la sou 吹着前奏望着天空 我想起花瓣试着掉落
        为你翘课的那一天 花落的那一天 教室的那一间 我怎么看不见 消失的下雨天 我好想再淋一遍 没想到失去的勇气我还留着 好想再问一遍 你会等待还是离开 刮风这天我试过握着你手 但偏偏雨渐渐大到我看你不见 还要多久我才能在你身边 还要多久我才能够在你身边
        等到放晴的那天也许我会比较好一点 等到放晴那天也许我会比较好一点 从前从前有个人爱你很久 但偏偏风渐渐把距离吹得好远 偏偏风渐渐把距离吹得好远 但偏偏雨渐渐把距离吹得好远 好不容易又能再多爱一天 但故事的最后你好像还是说了拜拜
        但故事的最后你好像还是说了
    </div>
    <p>滚动 <span id="demo">0</span> 次。</p>



var x = 0;
let example5 = new Vue({
    el: "#example-5",
    methods: {
         onScroll: () => {
             for (var i = 0; i < 10000; i++) {
                   console.log(i);
             }
         document.getElementById("demo").innerHTML = x += 1;
         }
    }
})

但是感觉无论我设置.passive,或者.prevent或者不设置,滚动都不会受到for循环的阻塞。是我的理解错了?

阅读 18k
3 个回答

首先 onScroll 不是 scroll 的默认行为,比如,点击 a 标签会跳转这才是默认行为,如果对 a 标签使用 preventDefault 或 .prevent,此时才会阻止 a 跳转。
所以你在 onScroll 写循环是会阻塞滚动行为的。
我的理解是指在 a 标签上加 .passive 后就肯定会跳转,就算加了 event.preventDefault 或 .prevent 也会不起作用的。

添加了 .passive 表示不会在监听函数里添加 preventDefault() 来阻止默认行为。
参考 MDN addEventListener

新手上路,请多包涵

楼主这个问题解决了吗?
我找了一下资料,网址:
https://www.cnblogs.com/ziyun...
中有一段:
passive 不能保证什么

里面没有说有scroll事件,只有touchstart和touchend以及whell,并没有提及SCROLL事件

不知道是不是VUE的官网文档有BUG。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题