full page .js prevent short scrolling on mobile - iphone

Question

Site in question: http://pizza.tgihost2.com
I'm using fullpage.js to display two food menus. There is one section with two slides. Each slide is its own food menu. The fullpage section is set to display: none at first. The fullpage section is revealed by the user via jquery.:
$('#launchPizzaMenu, .launch-menu').click(function() {
$('body').addClass('noscroll');
$.fn.fullpage.silentMoveTo('menu', 0);
$('#fullpage').slideDown(200);
});
The issue is the scrolling behavior on mobile when viewing the fullpage content. It's not smooth and fluid liek the rest of the page. When I scroll / flick, I'd expect it to continue to scroll a bit after I release my finger from the screen, but the scroll stops immediately and feels laborious to scroll through the fullpage content.
Here's my fullpage config:
$('#fullpage').fullpage({
anchors: ['menu'],
controlArrows: false,
autoScrolling: false,
responsiveWidth: 900,
afterResponsive: function(isResponsive){
}
});
Here's a gist showing the fullpage markup: https://gist.github.com/anonymous/0f8c33a2a875040edb7d5503238f8f71
There is one section with two slides.
Slide one starts on line 21.
Slide two starts on 152
How can I achieve smooth scrolling within the fullpage content?

Answer 1

You should be using the fullPage.js option scrollOverflow:true instead of your own overflow: scroll; for the section with bigger content.
See this example.
The smooth scrolling won't work as expected in all devices/browsers unless you use a library like iScroll.js, which is the one fullPage.js uses when using scrollOverflow:true.