title: scrollOverflow using FullPageJS not working on click event
body: <p>I'm building a instance of Fullpage.js that has to be initialized on a click event, then destroyed when clicking to another page, and vice versa. scrollOverflow works fine if the the #fullpage element is not hidden on page load. </p>
  
  <p>When .fullpage-trigger is clicked the #fullpage element is displayed and built, but the two elements with the classes .fp-scrollable and .fp-scroller aren't created? </p>
  
  <p>Broken live example: <a href="http://realbadrabbits.com/test/bug.html" rel="nofollow noreferrer">http://realbadrabbits.com/test/bug.html</a></p>
  
  <p>Thanks in advance :)</p>
  
  <pre><code>$('.fullpage-trigger').on('click', function(event) {
      $('#fullpage').fullpage({
          anchors: ['1', '2'],
          navigation: true,
          navigationPosition: 'left',
          navigationTooltips: ['1', '2'],
          scrollOverflow: true
      });
  });
  
  $(document).on('click', '.destroy', function(){
      $.fn.fullpage.destroy('all');
      $('#fullpage').removeClass('active');
      $('#fullpage').addClass('hide-page');
  });
  </code></pre>