End of a scroll event in JS or vue

Question

I want to display somthing while NOT scrolling, hide it while scrolling and redisplay it when the scrolling has stopped.

To make myself more clear: I can easily display what I want and hide it again if the scrolling event fires. However if the scrolling event has stopped I want to update my view and for that I need to know when that happens.

I've seen some ideas with timeout, but that means that while scrolling I need to check periodically if the event is still firing or not.

Seems to me that this is not a good approach, if there is a way to handle that eventoriented. Best case szenario I can think of, is a variable boolean "scrolling" that I can use for a computed property. So something like this:

 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;
      }
   }

Answer 1

Ok so I know you don't really want to use a timer but it does seem like the appropriate way to do this since we don't really have a way to determine stopped scrolling. So how about something like this:

var scroll;
window.addEventListener('scroll', function (event) {
  window.clearTimeout(scroll);
  hidestuff();
  scroll = setTimeout(function () {
    redisplay();
  }, 500);
}, false);

The above code refreshes the timer every time scroll is being triggered and if for half a second (500 milliseconds) no scroll is being performed a "stop scroll" is assumed and you call your logic to redisplay what you've hidden.

Answer 2

The term you should be looking for is debouncing events. In this case the scroll events. When you add event for onscroll, browser dispatches scrollevents every time your mouse wheel is moved/rolled. One thing to note is that the scrollevent will be triggered multiple times as depending upon the scroll wheel.

So what you want now is to know when the first scrollevent was dispatched(scrolling = true), and when the last scroll event was dispatched(scrolling = false).

Well let's see the code first then we will dive into explanation.

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.
   }
}

So let me just quickly explain what's going on there in the code.

As we know multiple events are triggered for scroll, so we set isScrolling as true,(will be set true every time event is dispatched). And then for every time the scroll event is dispatched we will try to set isScrolling as false assuming the current event is the last scroll event, using 300ms delay(or whatever time you want to give). In case this is not the last event, we will cancel the previous setTimeout which is stored in scrollTimeout and try again with the current event. And for the last event, the last setTimeout will not be cleared hence setting isScrolling as false.

This bery smart and interesting way of handling events are debouncing. I recommend you to read more about it.

I hope it helps.

Answer 3

I did some research and haven't found a way to detect scroll end without setTimeout.

So here is what is suggest, in your created lifecycle method, add an event listener to the scroll event that changes a scrolling boolean to true. You use a setTimeout to change it to false every 200ms.

And in your DOM, you use a v-if directive to display your element if you're not scrolling.

Something like this :

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>

Here is a jsfiddle