fullpage.js，如何添加沒有scrollBar的可堆疊元素：true

Question

我有一些問題，不知道如何解決它。我真的很喜歡fullpage.js的作品和功能！我希望有一個解決我的問題使用這個偉大的插件，如果不是，歡迎任何替代建議。

基本上，我的問題是，每張幻燈片都有可能溢出內容，因此我已啓用scrollOverflow: true選項以允許在這些部分中滾動。

我的問題是，我希望其中一個部分有三個文本塊在滾動時堆疊，使用類似jQuery vertical stack（演示here）的東西。

現在，我不知道如何在沒有啓用scrollBar: true的情況下執行此操作，但我不想使用這兩個滾動條（默認瀏覽器滾動條和slimscroll滾動條）。我希望有辦法做到這一點？

Answer 1

我想我已經想通了。如果有人知道更優雅的解決方案，我願意接受建議。

我有，在主頁上，有三行文字。我需要默認顯示第一個，而另外兩行要在用戶滾動時「滑動」。一旦所有三行都可見，pagepiling的滾動效果就會恢復正常。

因此，首先，我禁用pagePiling滾動一起，像這樣$.fn.pagepiling.setAllowScrolling(false);

然後用afterRender通話用用我自己的滾動劫持

afterRender: function(){ 
    //play the video BG for slide one 
    $('video').get(0).play(); 
    //disable scroll by default 
    $.fn.pagepiling.setAllowScrolling(false); 
    $.fn.pagepiling.setKeyboardScrolling(false); 

    /**************************************** 
    * Disable scrolling until all text piled 
    ****************************************/ 

    // Called when scrolling up/down 
    var delayScrollEvent = debounce(function(event){ 
     var delta = 0; 
     if (!event) event = window.event; 
     if (event.wheelDelta) { 
      delta = event.wheelDelta/120; 
      if (window.opera) delta = -delta; 
     } else if (event.detail) { 
      delta = -event.detail/3; 
     } 
     if (delta) 
      handleScrollEvent(delta); 
    }, 250, true); 

    // Called when swiping/panning up/left/right 
    var delaySwipeEvent = debounce(function(){ 
     wordStackCount++; 
     // Scroll up statements 
     if(wordStackCount == 1){ 
      $('#text1').animate({paddingTop: "0%"},800); 
     } 
     // Last statement, re-enable page scrolling 
     if(wordStackCount > 1){ 
      $('#text2').animate({paddingTop: "0%"},600); 
      $.fn.pagepiling.setAllowScrolling(true); 
     } 
    }, 80, true); 

    // Debounce; credit David Walsh 
    function debounce(func, wait, immediate) { 
     if (wordStackCount > 3) 
      return; 
     var timeout; 
     return function() { 
      var context = this, args = arguments; 
      var later = function() { 
       timeout = null; 
       if (!immediate) func.apply(context, args); 
      }; 
      var callNow = immediate && !timeout; 
      clearTimeout(timeout); 
      timeout = setTimeout(later, wait); 
      if (callNow) func.apply(context, args); 
     }; 
    }; 

    // Handle scrolling 
    function handleScrollEvent(delta) { 
     // Scrolling down 
     if (delta < 0){ 
      // Increment count 
      wordStackCount++; 
      // Scroll up statements 
      if(wordStackCount == 1){ 
       $('#text1').animate({paddingTop: "0%"},800); 
      } 
      // Last statement, re-enable page scrolling 
      if(wordStackCount > 1){ 
       $('#text2').animate({paddingTop: "0%"},600); 
       $.fn.pagepiling.setAllowScrolling(true); 
      } 
     } 
     // Else, scrolling up, ignore 
    } 

    // Action on mousewheel scroll 
    // For FireFox 
    if (window.addEventListener){ 
     window.addEventListener('DOMMouseScroll', delayScrollEvent, false); 
    } 
    // For all other browsers 
    window.onmousewheel = document.onmousewheel = delayScrollEvent; 

    // Swipe/pan event for touch devices; using Hammer.js 
    mc.on("swipeup swipeleft swiperight panup panleft panright", delaySwipeEvent); 

    /**************************************** 
    * End text pile scrolling stuff 
    ****************************************/ 
}