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);
}
});