Smooth Scrolling ist nicht konstant in der Leistung auf allen Geräten

Question

In meiner Praxis Seite habe ich eine glatte Scroll-Funktion, die ziemlich gut zu funktionieren scheint. Der Code dafür ist unten.

Als ich es auf verschiedenen Geräten getestet habe, habe ich eine leichte Diskrepanz bemerkt, die andere Funktionen in der Zukunft beeinflussen könnte. Wenn mein Scroll-Skript auf einigen Geräten aktiviert ist, scrollt es dorthin, wo es hingehört. Bei einigen Geräten scrollt es jedoch bis zu einem Punkt, der etwas niedriger ist als dort, wo es gescrollt werden soll. Dies hinterlässt einen kleinen Streifen von vielleicht nur ein oder zwei Pixeln des vorherigen Abschnitts. Um dies zu beheben, kann ich normalerweise 1 oder 2 Pixel von der Zielposition hinzufügen oder abziehen, wie ich es im folgenden Skript getan habe.

$(function() { 
    $('a[href*="#"]').click(function() { 
     var $target = $(this.hash); 
     $target = $target.length ? $target : $('html'); 
     var targetOffset = $target.offset().top + 1; 
     $('html,body').animate({scrollTop: targetOffset}, {duration: 1500, easing: 'easeInOutCubic'}); 
     return false; 
    }); 
}); 

Das Problem mit ihm, wie dies zu tun ist, wie ich festgestellt, bevor das Problem nicht alle Geräte beeinflussen, und ich weiß nicht, was die Geräte macht anders funktionieren, außer vielleicht der Bildschirmgröße/Auflösung.

Hier ist ein JSFiddle mit dem Code in Verwendung.

würde ich jede mögliche Hilfe schätzen diese

Answer 1

bei der Festsetzung Ich vermute, dass es nacheilenden sein könnte.

Sie sollten eine Bibliothek wie GSAP (in diesem Fall mit dem ScrollTo Plugin) für eine bessere Leistung verwenden. Es ist bekannt, dass jQuery eine schlechte Animationsleistung hat, und das Animieren der Bildlaufposition kann besonders teuer sein.

Answer 2

Wenn jemand auf diese Frage kommt und sich fragt, wie ich es geschafft habe, es zu arbeiten, ist das endgültige Skript unten. Ich habe es das GSAP Plugin, ScrollToPlugin, wie gcampbell

vorgeschlagen

$(function() { 
    $('a[href*="#"]').click(function() { 
     if(this.hash != "") { 
      TweenLite.to(window, 1.5, {scrollTo:{y:$(this.hash).position().top, autoKill:true}, ease: Power2.easeInOut}); 
     } else { 
      TweenLite.to(window, 1.5, {scrollTo:{y:0}, ease: Power2.easeInOut}); 
     } 
     return false; 
    }); 
});