Magic mouse is skipping the sections when scrolling

Asked

Viewed 20 times

1

So when I use a normal mouse, the scroll is correct, but when I use the Mouse, it skips one-two sections. How do I fix this? I tried to add a delay(100) when the user had using MAC that even solved the issue, problem that the user says gives a few crashes (it should be only the delay in scrolling).

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: http://www.maiconfurtado.com.br/themartec/start-interview.php

  • I think you’re adding to the event $(window).scroll(function(event) { without Throttle. This is too heavy for the browser. You can explain what this code should do (the functionality on the page)?

  • It checks whether the page goes down or up and makes the animated scrollTop

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.