创建可滚动的滑动页面

Question

我正在尝试创建一个 HTML5/CSS3/Javascript 可在移动设备和桌面设备上运行的 SPA，并且我正在尝试创建不同的滑动 "tabs" 本质上具有滚动功能每个选项卡下垂直。

作为我想要的示例，我希望得到与 Android 的 Google 环聊应用类似的最终结果，这是 [=10] 的一部分=] 基本上有我想要的。

在 Android 中实际上有几个问题和答案显示了如何做到这一点，但我想用网络技术来做到这一点，本教程准确地说明了我的目的： Android Slides with Material Design

MaterializeCSS 有一个 nice tab system 我想用，但它不会滑动页面，它只是立即切换到下一页。因此，任何人都知道一种使页面转换动画的方法，这非常适合我想要的。

我正在尝试使用 fullPage.js，但它看起来并没有按照我想要的方式工作，特别是我无法使用滚轮或箭头键垂直滚动。任何人都知道是否存在任何插件或代码使这非常可行？

Answer 1

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

我最终使用了 MaterializeCSS 的选项卡组件，对 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;
}

它现在运行良好。

创建可滚动的滑动页面

Creating Scrollable Sliding Pages

html

javascript

css

mobile

single-page-application