perfect-scrollbar plugin On reaching bottom, fires the event multiple times

Question

I am using perfect-scroll plugin

https://github.com/noraesae/perfect-scrollbar

And when I used the ps-y-reach-end event

document.addEventListener('ps-y-reach-end', (event)=> {
   console.log('Why this is printing multiple times when I reach Bottom, I wanted it to be single fire')
 });

Problem is the event fires more than once, when the scroll reached to the bottom of the container.

JSFiddle Demo

Web console prints :

Please scroll the y-axis to the bottom and you will see the consoles multiple times

Answer 1

You need to use a boolean flag to handle this

var el = document.querySelector('.container');

Ps.initialize(el);
let loading = false
document.addEventListener('ps-y-reach-end', (event) => {
    if (!loading) {
        loading = true
        alert('Why this is printing multiple times when I reach Bottom, I wanted it to be single fire')
    }

});