JQuery ScrollTo Plugin wird Jerky auf iOS

Question

Ich benutze die JQuery scrollTo plugin auf unserer one-page site, um vertikal zwischen den verschiedenen Abschnitten zu scrollen.

Die Schriftrolle funktioniert gut in allen Browsern außer iOS Safari, die scrollt, aber ist sehr ruckartig. Ich verwende eine Reihe anderer Jquery-Plugins auf der Seite, so dass es möglicherweise zu einem Konflikt mit diesen kommt.

Wenn jemand eine Alternative zu scrollTo kennt, die reibungslos auf dem iPad funktioniert oder vorschlagen kann, wo Sie anfangen, das Problem anzugehen, würde ich mich über die Hilfe freuen. Ich habe versucht this solution aber ohne Erfolg.

Answer 1

Danke für den Tipp Arnar.

Ihr Tipp mich auf den richtigen Weg und mit Hilfe von this JSFiddle habe ich jetzt genau die smooth scroll i wanted to achieve mit glatten animierten Bildlauf zu jedem Abschnitt und automatische Hervorhebung des aktiven Menüpunkts.

// Cache selectors 
var lastId, 
    topMenu = $("#top-menu"), 
    topMenuHeight = topMenu.outerHeight()+15, 
    // All list items 
    menuItems = topMenu.find("a"), 
    // Anchors corresponding to menu items 
    scrollItems = menuItems.map(function(){ 
     var item = $($(this).attr("href")); 
     if (item.length) { return item; } 
    }); 

// Bind click handler to menu items 
// so we can get a fancy scroll animation 
menuItems.click(function(e){ 
    var href = $(this).attr("href"), 
     offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1; 
    $('html, body').stop().animate({ 
     scrollTop: offsetTop 
    }, 300); 
    e.preventDefault(); 
}); 

// Bind to scroll 
$(window).scroll(function(){ 
    // Get container scroll position 
    var fromTop = $(this).scrollTop()+topMenuHeight; 

    // Get id of current scroll item 
    var cur = scrollItems.map(function(){ 
    if ($(this).offset().top < fromTop) 
     return this; 
    }); 
    // Get the id of the current element 
    cur = cur[cur.length-1]; 
    var id = cur && cur.length ? cur[0].id : ""; 

    if (lastId !== id) { 
     lastId = id; 
     // Set/remove active class 
     menuItems 
     .parent().removeClass("active") 
     .end().filter("[href=#"+id+"]").parent().addClass("active"); 
    }     
}); 

Answer 2

Versuchen Sie dieses

$.scrollTo(SELECTOR, 800, { 
    'axis':'y' 
});