Perfect Scrollbar

Choose the events

Perfect-scrollbar dispatches custom events.

                    
                        container.addEventListener('ps-scroll-x', () => ...);
                    
                

ps-scroll-y

This event fires when the y-axis is scrolled in either direction.

ps-scroll-x

This event fires when the x-axis is scrolled in either direction.

ps-scroll-up

This event fires when scrolling upwards.

ps-scroll-down

This event fires when scrolling downwards.

ps-scroll-left

This event fires when scrolling to the left.

ps-scroll-right

This event fires when scrolling to the right.

ps-y-reach-start

This event fires when scrolling reaches the start of the y-axis.

ps-y-reach-end

This event fires when scrolling reaches the end of the y-axis (useful for infinite scroll).

ps-x-reach-start

This event fires when scrolling reaches the start of the x-axis.

ps-x-reach-end

This event fires when scrolling reaches the end of the x-axis.

You can also watch the reach state via the reach property.

                    
                        const ps = new
                        PerfectScrollbar(...);

                        console.log(ps.reach.x); // => 'start' or 'end' or null
                        console.log(ps.reach.y); // => 'start' or 'end' or null