Magic mouse is skipping the sections when I scroll

1
So when I use a normal mouse, the scroll is correct, but when I use magic mouse, it skips one-two sections. How do I solve this? I tried to add a delay (100) when the user had to use MAC that even solved the problem, a problem that the user says to give some crashes (should be just the delay in doing the scroll).
var pages = 8;
var currentpage = 1;

var nextpage = currentpage + 1; if (nextpage > pages) { nextpage = pages; }
var prevpage = currentpage - 1; if (prevpage < 1) { prevpage = 1; }
var animatingup = false;
var animatingdown = false;

$(document).ready(function() {
    resizeDiv();
});

window.onresize = function(event) {
    resizeDiv();
    scrolltocurrent();
}

$(window).scroll(function(event) {
    if(!clickInterview) {
        if (animatingup==true) { return; }
        if (animatingdown==true) { return; }
        nextpage = currentpage + 1; if (nextpage > pages) { nextpage = pages; }
        prevpage = currentpage - 1; if (prevpage < 1) { prevpage = 1; }

        var prevent = function() {
            event.stopPropagation();
            event.preventDefault();
            event.returnValue = false;
            return false;
        }

        if (animatingup == false) {
            if ($(window).scrollTop()+$(window).height()>=$("#page"+(nextpage)).offset().top+50) {
                if (nextpage > currentpage) {
                    var p2 = $("#page"+(nextpage));
                    var pageheight = p2.position().top;
                    animatingdown = true;
                    window.onwheel = function(){ return prevent(); };
                    if(navigator.platform.toUpperCase().indexOf('WIN') > -1)
                        $('html, body').stop().animate({ scrollTop: pageheight }, 500, 'swing', function() { currentpage = nextpage; animatingdown = false; $('html, body').stop(); window.onwheel = function(){ return true; }});
                    else if(navigator.platform.toUpperCase().indexOf('MAC') > -1)
                        $('html, body').stop().delay(100).animate({ scrollTop: pageheight }, 500, 'swing', function() { currentpage = nextpage; animatingdown = false; $('html, body').stop(); window.onwheel = function(){ return true; }});
                    return prevent();
                }
            }
        }
        if (animatingdown == false) {
            if ($(window).scrollTop()<=$("#page"+(currentpage)).offset().top-50) {
                if (prevpage < currentpage) {
                    var p2 = $( "#page"+(currentpage) );
                    var pageheight = p2.position().top-$(window).height();
                    animatingup = true;
                    window.onwheel = function(){ return prevent(); };
                    if(navigator.platform.toUpperCase().indexOf('WIN') > -1)
                        $('html, body').stop().animate({ scrollTop: pageheight }, 500, 'swing', function() { currentpage = prevpage; animatingup = false; $('html, body').stop(); window.onwheel = function(){ return true; }});
                    else if(navigator.platform.toUpperCase().indexOf('MAC') > -1)
                        $('html, body').stop().delay(100).animate({ scrollTop: pageheight }, 500, 'swing', function() { currentpage = prevpage; animatingup = false; $('html, body').stop(); window.onwheel = function(){ return true; }});                         
                    return prevent();
                }
            }
        }
        return prevent();
    }
});

function scrolltocurrent() {
    var p2 = $( "#page"+(currentpage) );
    var pageheight = p2.position().top;
    $('html, body').stop().animate({ scrollTop: pageheight }, 900);
}

function resizeDiv() {
    vpw = $(window).width();
    vph = $(window).height();
    $('.page').css({'min-height': vph + 'px'});
}

$('html, body').scrollTop(0);

Live: link

    
asked by anonymous 17.04.2017 / 20:08

0 answers