<div id="fullpage">
    <div class="section">Section 1</div>
    <div class="section">Section 2</div>
    <div class="section">Section 3</div>
    <div class="section">Section 4</div>
</div>

.section {
  text-align:center;
  font-size: 3em;
}

.scrollable-content{
  background: white;
  overflow: scroll;
  margin: 0 auto;
  width: 500px;
  height: 250px;
}

$('#fullpage').fullpage({ 
  sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
  fitToSection: false,
  afterLoad: function(origin, destination, direction){
    var bodyOverflow = $('body').css('overflow');
    console.log(destination)
    if(destination === 3 && bodyOverflow === 'hidden'){
      $.fn.fullpage.setAutoScrolling(false);
    }
  }
})
$(window).on('scroll', function(){
  var scrollTop = $(window).scrollTop();
  var offsetAbout = $('.section').eq(2).offset().top;
  var bodyOverflow = $('body').css('overflow');
  if(scrollTop < offsetAbout && bodyOverflow === 'visible'){
    $.fn.fullpage.setAutoScrolling(true);
    $.fn.fullpage.moveSectionUp();
  }
})