How to detecting touch pad scroll using jQuery/JavaScript

Question

I am building webpage. It will look like single page but I am dealing with sections.On clicking on button controls i am hiding all the sections and showing particular section on the screen. So, can I do same control with Mouse pad scroll up and down?I have checked in google, I couldn't get proper solution. If this question is already posted, Please provide me the reference links.

Answer 1

You can use the scroll event to respond to the user scrolling, like this:

$("#target").scroll(function(event) {
    console.log("scroll event received:", event);
});

Note that the scroll events are triggered very frequently, so if you do anything that makes the browser work hard, you should take care to throttle the events, i.e. make sure you execute your code only every x milliseconds or so.

If you want to execute code only after the scroll has stopped, I have this fiddle for you.

function checkf(predf, callback, ms) {
    window.setTimeout(function () {
        if (predf()) {
            callback();
            return;
        }
        checkf(predf, callback, ms);
    }, ms);
}

function afterScrollStops(func) {
    var ms = 100, // interval to perform the scroll position check
        oldX = $(document).scrollLeft(),
        oldY = $(document).scrollTop();

    function startf() {
        $(document).one("scroll", function () {
            checkf(function () {
                var newX = $(document).scrollLeft(),
                    newY = $(document).scrollTop(),
                    stoppedScrolling = newX === oldX && newY === oldY;

                oldX = newX;
                oldY = newY;

                return stoppedScrolling;
            }, function () {
                func();
                startf();
            }, ms);
        });
    }

    startf();
}

afterScrollStops(function () {
    console.log("user stopped scrolling");
});

In this example, the callback function passed to the afterScrollStops function is executed after the user has stopped scrolling.