創建可滾動的滑動頁面

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

現在工作得很漂亮。