JS或vue中滚动事件的结束
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS或vue中滚动事件的结束相关的知识，希望对你有一定的参考价值。
我想在不滚动时显示某些内容，在滚动时隐藏它并在滚动停止时重新显示它。
为了让自己更清楚：如果滚动事件触发，我可以轻松显示我想要的内容并再次隐藏它。但是，如果滚动事件已经停止，我想更新我的视图，为此我需要知道何时发生这种情况。
我已经看到一些超时的想法，但这意味着在滚动时我需要定期检查事件是否仍在触发。
在我看来，如果有办法处理面向事件的方法，这不是一个好方法。我能想到的最好的案例szenario，是一个变量布尔“滚动”，我可以用于计算属性。所以像这样：
computed:{
displayLine: function(){
if(scrolling){
//display what I want
} else{
//hide it
}
}
// Or something like this:
scrolling: function(){
//if scrolling
return true;
//if not scrolling
return false;
}
}
好的，所以我知道你真的不想使用计时器，但它似乎是这样做的合适方式，因为我们真的没有办法确定停止滚动。那么这样的事情怎么样：
var scroll;
window.addEventListener('scroll', function (event) {
window.clearTimeout(scroll);
hidestuff();
scroll = setTimeout(function () {
redisplay();
}, 500);
}, false);
上面的代码每次触发滚动时刷新定时器，如果半秒（500毫秒）没有执行滚动，则假定“停止滚动”并且您调用逻辑重新显示您隐藏的内容。
我做了一些研究，并没有找到一种方法来检测滚动结束没有setTimeout。
所以这里有建议，在你的created生命周期方法中，向滚动事件添加一个事件监听器，将scrolling布尔值更改为true。您使用setTimeout每200ms将其更改为false。
在你的DOM中，如果你不滚动，你可以使用v-if指令来显示你的元素。
像这样的东西：
new Vue({
el: "#app",
data: {
scrolling: false
},
methods: {},
created: function() {
let isScrolling;
window.addEventListener('scroll', () => {
this.scrolling = true
window.clearTimeout(isScrolling);
isScrolling = setTimeout(() => {
this.scrolling = false
}, 400);
}, false);
}
})<div id="app">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus expedita, voluptate eveniet sequi fugiat doloribus omnis facilis aliquid ipsa mollitia ab illum eius dolores soluta accusantium quos vitae assumenda tempore?Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Alias laboriosam, ullam repellat quod quae repudiandae ipsum distinctio eius numquam officia. Eos quia, enim. Sunt nisi accusamus non dicta, similique sit.
</p>
<p v-if="!scrolling">
NOT SCROLLING
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus expedita, voluptate eveniet sequi fugiat doloribus omnis facilis aliquid ipsa mollitia ab illum eius dolores soluta accusantium quos vitae assumenda tempore?Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Alias laboriosam, ullam repellat quod quae repudiandae ipsum distinctio eius numquam officia. Eos quia, enim. Sunt nisi accusamus non dicta, similique sit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus expedita, voluptate eveniet sequi fugiat doloribus omnis facilis aliquid ipsa mollitia ab illum eius dolores soluta accusantium quos vitae assumenda tempore?Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Alias laboriosam, ullam repellat quod quae repudiandae ipsum distinctio eius numquam officia. Eos quia, enim. Sunt nisi accusamus non dicta, similique sit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus expedita, voluptate eveniet sequi fugiat doloribus omnis facilis aliquid ipsa mollitia ab illum eius dolores soluta accusantium quos vitae assumenda tempore?Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Alias laboriosam, ullam repellat quod quae repudiandae ipsum distinctio eius numquam officia. Eos quia, enim. Sunt nisi accusamus non dicta, similique sit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus expedita, voluptate eveniet sequi fugiat doloribus omnis facilis aliquid ipsa mollitia ab illum eius dolores soluta accusantium quos vitae assumenda tempore?Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Alias laboriosam, ullam repellat quod quae repudiandae ipsum distinctio eius numquam officia. Eos quia, enim. Sunt nisi accusamus non dicta, similique sit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus expedita, voluptate eveniet sequi fugiat doloribus omnis facilis aliquid ipsa mollitia ab illum eius dolores soluta accusantium quos vitae assumenda tempore?Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Alias laboriosam, ullam repellat quod quae repudiandae ipsum distinctio eius numquam officia. Eos quia, enim. Sunt nisi accusamus non dicta, similique sit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus expedita, voluptate eveniet sequi fugiat doloribus omnis facilis aliquid ipsa mollitia ab illum eius dolores soluta accusantium quos vitae assumenda tempore?Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Alias laboriosam, ullam repellat quod quae repudiandae ipsum distinctio eius numquam officia. Eos quia, enim. Sunt nisi accusamus non dicta, similique sit.
</p>
</div>你应该寻找的术语是去除事件。在这种情况下滚动事件。为onscroll添加事件时，每次移动/滚动鼠标滚轮时，浏览器都会调度scrolllevents。需要注意的一点是，根据滚轮的不同，会触发多次滚动。
所以你现在想要的是知道何时调度第一个scrolllevent（scrolling = true），以及何时调度最后一个scroll事件（scrolling = false）。
我们先看看代码，然后再深入解释。
data(){
return{
isScrolling:false // initially false,
scrollTimeout: null
}
},
methods:{
onScroll(event){
const vm = this
vm.isScrolling = true; //as soon as scroll event is dispatched, set isScrolling as true
clearTimeout(vm.scrollTimeout); // clea
vm.scrollTimeout = setTimeout(function(){
vm.isScrolling = false
},300) //300ms after the last event isScrolling will be set false.
}
}
所以，让我快速解释一下代码中发生了什么。
我们知道滚动触发了多个事件，因此我们将isScrolling设置为true（每次调度事件时都将设置为true）。然后每次调度scroll事件时，我们将尝试将isScrolling设置为false，假设当前事件是最后一个滚动事件，使用300ms延迟（或者您想要给出的任何时间）。如果这不是最后一个事件，我们将取消存储在scrollTimeout中的前一个setTimeout，并使用当前事件再次尝试。对于最后一个事件，最后一个setTimeout将不会被清除，因此设置isScrolling为false。
这种处理事件的非常智能和有趣的方式是去抖动。我建议你阅读更多相关信息。
我希望它有所帮助。
以上是关于JS或vue中滚动事件的结束的主要内容，如果未能解决你的问题，请参考以下文章