detecting the swipe up event on section 1

[halukkaramete]

Description

Fullpage scrolls up and down naturally and beautifully. And as expectedly, it cannot scroll up when it is already on the first section as there is no place to scroll up to.

But, I'm in need of detecting this particular action/event.

Is there an API call to detect that user did perform a scroll up (or swipe up) action while he was on section 1? A good use case for this would rise when one needs to build a UI like "pull to refresh" that we are accustomed to from mobile UIs ( though my need is completely different )

Link to isolated reproduction with no external CSS / JS

[Ideally in jsfiddle.net (https://jsfiddle.net/alvarotrigo/ea17skjr) or codepen.io (https://codepen.io/alvarotrigo/pen/NxyPPp), links to personal websites won't be reviewed unless isolated. Reported issues without a reproduction might get closed.]

Steps to reproduce it

1. [First step]
2. [Second step]
3. [and so on...]

Versions

[Browser, operating system, device, ...]

[alvarotrigo]

Yeah, right now, there are no such events. Thanks for the suggestion! 👍

I guess you could listen to the mousewheel event, but that won't detect a "swipe" and it will throw hundreds of events per swipe on inertial scrolling devices like Apple trackpads.

[halukkaramete]

Following code takes care of the need for desktops but mobile devices fire false alarms with it.

<script>
        // Function to detect when the user is at the top of the page
        function isAtTop() {
            return window.scrollY === 0;
        }

        // Add scroll event listener
        window.addEventListener('scroll', () => {
            if (isAtTop()) {
                console.log('User is at the top of the page.');
            }
        });

        // Add wheel event listener to detect further scroll attempts
        window.addEventListener('wheel', (event) => {
            if (isAtTop() && event.deltaY < 0) {
                console.log('User tried to scroll further up.');
            }
        });

        // For touch devices, add touchmove event listener
        window.addEventListener('touchmove', (event) => {
            if (isAtTop() && event.touches[0].clientY > 0) {
                console.log('User tried to scroll further up (touch).');
            }
        });
    </script>

[alvarotrigo]

Don't check the scroll position, the clientY or the scrollY.

Just check if you are on the first section of fullPage.js. You can do this by using fullPage.js state classes ('active', 'fp-viewing-'...) or by using fullPage.js callbacks and keeping track of it by yourself.