Very slow scrolling with jquery nicescroll on mobile devices

Question

I am developing a single pager website using twitter bootstrap. I use jQuery nicescroll to scroll within sections(the user is only allowed to scroll through particular section when he clicks on a menu item).It works fine when the section has less content and scrolls smoothly but when the number of elements increases within the section, scrolling is terribly slow.

jQuery code:

jQuery("section").niceScroll({horizrailenabled:false,scrollspeed:"5"});
jQuery("section").getNiceScroll().hide();//to hide the scrollbar but allow scrolling

Please suggest.

Answer 1

Mobile has very little memory. Lots of DOM elements will cause a slow down. Reduce the DOM elements and styles might help.

I'd first remove all the CSS to see if that speeds it up. box-shadows and border-raduis can use a lot of the processor. Other items might be slowing it down a lot.

Also you can use the timeline in Safari 6.1 or Chrome dev tools to see how many times you are recalculating the styles and repainting the screen. repainting too much will also slow it down a lot.

The really way to get fast scrolling on mobile is to do a lot of custom optimizations for the browser, DOM, network and garbage collector. Check out the code for PerfView to see some of the optimizations (https://github.com/puppybits/BackboneJS-PerfView).