How to detect single swipe on Laptop Trackpad

221 Views Asked by At

I have created a scroll to div jquery where trackpad is sort of sensitive in scrolling so the longer I scroll with the trackpad, the continuous scroll it will make. Mousewheel works fine but the trackpad is really the issue. Is it possible to detect a single swipe event on trackpad?

As for windows, its not really a problem but I'm pretty sure that is a issue on Macs since their mouse works as a trackpad and its sensitivity is higher than windows.

Code:

var lazyLayout = _.throttle(scrollThere, 600, true);

function scrollThere(targetElement, speed) {
        var is_safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
        if(is_safari){
            bodyelem = $("body");
        }
        else{
            bodyelem = $("html,body");
        }
    //  // initiate an animation to a certain page element:
        if($(targetElement).hasClass( "company-logos-contact" )){
            bodyelem.stop().animate(
                { 
                    scrollTop: targetElement.offset().top-500 
                }, // move window so target element is at top of window
                500
            ); // end animate
        }
        else{
            bodyelem.stop().animate(
                { 
                    scrollTop: targetElement.offset().top-70 
                }, // move window so target element is at top of window
                500
            ); // end animate

        }
}

var $nonScrollable = $("#wrapper");
var c_time = 0;

$nonScrollable.disablescroll();
        $(window).on('mousewheel', function (e) {
            // get Y-axis value of each div:S
            e.preventDefault();

            if(($.now() - c_time) > 500) //0.5s
            {
                c_time = $.now();
                var div1y = $('#home-section-one').offset().top-70,
            div2y = $('#home-section-two').offset().top-70,
            div3y = $('#why-choose-us').offset().top-70,
            div4y = $('#the-team').offset().top-70,
            div5y = $('#contact-section').offset().top-70,
            div6y = $('.footer-contents').offset().top-70,
            // get window's current scroll position:
            lastScrollTop = $(this).scrollTop(),
            // for getting user's scroll direction:
            scrollDirection,
            // for determining the previous and next divs to scroll to, based on lastScrollTop:
            targetUp,
            targetDown,
            // for determining which of targetUp or targetDown to scroll to, based on scrollDirection:
            targetElement;

            // get scroll direction:
            if ( e.deltaY > 0 ) {
                scrollDirection = 'up';
            } else if ( e.deltaY <= 0 ) {
                scrollDirection = 'down';
            } // end if
            if (lastScrollTop === div1y) {
                targetUp = $('#home-section-one');
                targetDown = $('#home-section-two');
            }
            else if (lastScrollTop === div2y) {
                targetUp = $('#home-section-one');
                targetDown = $('#why-choose-us');
            }
            else if (lastScrollTop === div3y) {
                targetUp = $('#home-section-two');
                targetDown = $('#the-team');
            }
            else if (lastScrollTop === div4y) {
                targetUp = $('#why-choose-us');
                targetDown = $('#contact-section');
            }
            else if (lastScrollTop === div5y) {
                targetUp = $('#the-team');
                targetDown = $('.footer-contents');
            }
            else if (lastScrollTop === div6y) {
                targetUp = $('#contact-section');
                targetDown = $('#home-section-one');
            }

            else if (lastScrollTop < div2y) {
                targetUp = $('#home-section-one');
                targetDown = $('#home-section-two');
            } 
            else if (lastScrollTop < div3y) {
                targetUp = $('#home-section-two');
                targetDown = $('#why-choose-us');
            }
            else if (lastScrollTop < div4y) {
                targetUp = $('#why-choose-us');
                targetDown = $('#contact-section');
            }
            else if (lastScrollTop <= div5y) {
                targetUp = $('#the-team');
                targetDown = $('.footer-contents');
            }

            else if (lastScrollTop <= div6y) {
                targetUp = $('#contact-section');
                targetDown = $('#home-section-one');
            }

            // condition: determine which of targetUp or targetDown to scroll to, based on scrollDirection:
            if (scrollDirection === 'down') {
                targetElement = targetDown;
            } else if (scrollDirection === 'up') {
                targetElement = targetUp;
            } // end else if

            // scroll smoothly to the target element:

            lazyLayout(targetElement);
            }
        });
0

There are 0 best solutions below