Question

我正在尝试创建一个HTML5 / CSS3 / Javascript SPA，它可以在移动设备和桌面上运行，我试图创建不同的滑动＆＃34;标签＆＃34;基本上，能够在每个标签下垂直滚动。

作为我的目标的一个示例，我希望能够为Android版Google Hangouts应用程序获得类似的最终结果，这里是video的一部分基本上有我想要的。

实际上有几个问题的答案显示了如何在Android中执行此操作，但我希望通过网络技术来完成，本教程将准确显示我的目标： Android Slides with Material Design

MaterialiseCSS有nice tab system我想要使用，但它不会滑动页面，只是立即更改到下一页。因此，任何人都知道如何使页面过渡动画，这对于我想要的东西来说是完美的。

我试图使用fullPage.js，但看起来它并不是我想要的，特别是我无法使用滚轮或箭头键垂直滚动。任何人都知道是否有任何插件或代码使这个非常可行？

Answer 1

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

我最终使用了MaterialiseCSS的标签组件，并对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;
}

它现在工作得非常好。

创建可滚动滑动页面

1 个答案: