Q:

Creating Scrollable Sliding Pages

I'm attempting to create a HTML5/CSS3/Javascript SPA that'll work on mobile devices and on desktop, and I'm trying to create different sliding "tabs" essentially, with the ability to scroll vertically under each tab.
As an example of what I'm going for, I'm hoping to have a similar end result to the Google Hangouts app for Android, here's a section of a video that has basically what I want.
There's actually several questions with answers showing how to do it in Android, but I'd like to do it with web technology, this tutorial shows exactly what I'm going for:
Android Slides with Material Design
MaterializeCSS has a nice tab system that I'd like to use, but it doesn't slide the pages, it just instantly changes to the next page. So it anyone knows of a way to make that animate the page transitions, that'd be perfect for what I want.
I was trying to use fullPage.js, but it looked like it wasn't working quite how I wanted, specifically I couldn't scroll vertically using the scroll wheel or arrow keys. Anyone know if there exists any plugin or code that makes this very doable?

A:

Resolved it myself with a bit of work. I ended up dropping fullPage.js altogether, since it clearly was made for full-screen effects, not larger-than-screen-size scrolling.
I ended up using MaterializeCSS's tabs component, with some modification to the javascript:
    // Make the old tab inactive.
    $active.removeClass('active');
    $oldContent = $content;

    // Update the variables with the new link and content
    $active = $(this);
    $content = $(this.hash);
    $links = $this.find('li.tab a');

    // Make the tab active.
    $active.addClass('active');
    var $prev_index = $index;
    $index = $links.index($(this));
    if ($index < 0) {
      $index = 0;
    }

    // Change url to current tab
    window.location.hash = $active.attr('href');

    // Update indicator
    if (($index - $prev_index) > 0) { //Moving Right
      $indicator.velocity({"right": $tabs_width - (($index + 1) * $tab_width)}, { duration: 300, queue: false, easing: 'easeOutQuad'});
      $indicator.velocity({"left": $index * $tab_width}, {duration: 300, queue: false, easing: 'easeOutQuad', delay: 90});
      //Hide old tab
      $oldContent.velocity({left: "-100%"}, {display: "none"}, {queue: false, easing: 'easeOutQuad'});
      //Reveal new tab
      $content.velocity({left: "100%"}, {display: "inline"}, {duration: 0, queue: false});
      $content.velocity({left: "0px"}, {queue: false, easing: 'easeOutQuad'});

    }
    else if (($index - $prev_index) < 0) { //Moving Left
      $indicator.velocity({"left": $index * $tab_width}, { duration: 300, queue: false, easing: 'easeOutQuad'});
      $indicator.velocity({"right": $tabs_width - (($index + 1) * $tab_width)}, {duration: 300, queue: false, easing: 'easeOutQuad', delay: 90});
      //Hide old tab
      $oldContent.velocity({left: "100%"}, {display: "none"}, {queue: false, easing: 'easeOutQuad'});
      //Reveal new tab
      $content.velocity({left: "-100%"}, {display: "inline"}, {duration: 0, queue: false});
      $content.velocity({left: "0px"}, {queue: false, easing: 'easeOutQuad'});
    }

Perhaps the part that messed me up the most was figuring out that in order to animate the entire div, they needed to have positioning of absolute, with a parent of relative position:
html, body {
  position: relative;
  height: 100%;
  overflow-x: hidden;
}
div.main-div {
  background-color: red;
  padding-top: 60px;
  min-height: 100%;
  min-width: 100%;
  position: absolute;
}

It's now working beautifully.

