fullpage.js，如何在没有滚动条的情况下添加可堆叠元素：true

Question

我有一点问题，不知道如何解决。我真的很喜欢 fullpage.js 的工作方式和功能！我希望使用这个很棒的插件可以解决我的问题，如果没有，欢迎提出任何替代建议。

基本上，我的问题是每张幻灯片都可能有溢出的内容，因此我启用了 scrollOverflow: true 选项以允许在这些部分中滚动。

我的问题是，我希望其中一个部分具有三个文本块，这些文本块在您滚动时堆叠，使用类似这样的东西 jQuery vertical stack (demo here)。

现在，我不确定如何在不启用 scrollBar: true 的情况下执行此操作，我不想这样做，因为那时我有两个相互竞争的滚动条（默认浏览器滚动条和 slimscroll 滚动条）酒吧）。我希望有办法做到这一点？

Answer 1

我想我已经明白了。如果有人知道更优雅的解决方案，我愿意接受建议。

我有的，在主页上，有三行文字。我需要默认显示第一行，其他两行在用户滚动时显示 "slide" 。一旦所有三行都可见，pagePiling 的滚动效果就会 returns 正常。

所以首先，我像这样禁用了 pagePiling 一起滚动 $.fn.pagepiling.setAllowScrolling(false);

然后使用 afterRender 调用来使用我自己的 scroll-jacking

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
    ****************************************/
}

fullpage.js，如何在没有滚动条的情况下添加可堆叠元素：true

fullpage.js, how to add stackable elements without scrollBar: true

jquery

fullpage.js