Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome 61 jQuery scrolling not working anymore

Since Chrome 61, I have many problems with scrolling through jquery 3.2.1 commands. It does not scroll anymore.

Chrome gives me the console notification (the page is last updated mei 12, 2017).

Blink deferred a task in order to make scrolling smoother. Your timer and network tasks should take less than 50ms to run to avoid this. Please see https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail and https://crbug.com/574343#c40 for more information.

Example:

console.log("start");
$('body').animate({ 
  scrollTop : $('#id').offset().top - 100
},3000,function(e) {
  console.log("end");
});

Does anyone have an idea what the cause is and what I can do with it?

like image 207
Wobbo Avatar asked Sep 06 '17 09:09

Wobbo


1 Answers

It seems that the overflow is set to the html in current version ( like in -moz. Check out this question that i made a while a go )

$(function() {
    console.log("start");
    $('html').animate({
        scrollTop: $('#my-id').offset().top - 100
    }, 3000, function(e) {
        console.log("end");
    });
});

https://jsfiddle.net/4ebggecv/

Or you could add those styles and keep animating body

html {
    overflow: hidden;
    height: 100%;
}
body {
    height: 100%;
    overflow: auto;
}

https://jsfiddle.net/ykyt58ac/1/

like image 159
Toni Michel Caubet Avatar answered Sep 25 '22 12:09

Toni Michel Caubet