Wtyczka JQuery scrollTo staje się Jerky na iOS

Question

Używam JQuery scrollTo plugin na naszej one-page site do pionowego przewijania między różnymi sekcjami.

Zwój działa dobrze we wszystkich przeglądarkach z wyjątkiem iOS Safari, który przewija się, ale jest bardzo nierówny. Używam wielu innych wtyczek Jquery na stronie, więc może to być konflikt z jednym z nich.

Jeśli ktoś zna alternatywę dla scrollTo, która działa płynnie na iPadzie lub może zasugerować, gdzie rozpocząć rozwiązywanie problemu, byłbym wdzięczny za pomoc. Próbowałem już this solution, ale bez powodzenia.

Answer 1

Dzięki za cynk Arnar.

Twoja rada stawia mnie na dobrej drodze, a przy pomocy this JSFiddle mam teraz dokładnie smooth scroll i wanted to achieve z płynnym animowanym przewijaniem do każdej sekcji i automatycznym podświetlaniem aktywnego elementu menu.

// 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

Spróbuj ten

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