创建可滚动的滑动页面

Question

我正在尝试创建一个可在移动设备和台式机上运行的HTML5 / CSS3 / Javascript SPA，并且试图创建本质上可以在每个标签下垂直滚动的不同滑动“标签”。

举例来说，我希望最终结果与Android版Google Hangouts应用类似，这是一段视频 ，基本上满足了我的需求。

实际上，有几个问题的答案显示了如何在Android中执行此操作，但是我想使用网络技术来执行此操作，本教程确切地显示了我的目标： 具有材料设计的Android幻灯片

MaterializeCSS有一个我想使用的漂亮的标签系统 ，但是它不会滑动页面，只是立即更改到下一页。 因此，任何人都知道一种使页面过渡动画化的方法，这对于我想要的是完美的。

我正在尝试使用fullPage.js，但似乎无法按照我的意愿运行，特别是我无法使用滚轮或箭头键垂直滚动。 有人知道是否有任何插件或代码可以实现这一目标吗？

Answer 1

我自己通过一些工作解决了它。 我最终完全删除了fullPage.js，因为它显然是为全屏效果而不是大于屏幕尺寸的滚动而制作的。

我最终使用了MaterializeCSS的tabs组件，并对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'});
    }

也许最让我感到困惑的部分是想使整个div动画化，他们需要具有绝对位置，并具有相对位置的父级：

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;
}

现在工作得很漂亮。