Question

我有一些问题，不知道如何解决它。我真的很喜欢fullpage.js的工作原理和功能！我希望有一个解决我的问题使用这个伟大的插件，如果没有，欢迎任何其他建议。

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

我的问题是，我希望其中一个部分有三个文本块在滚动时堆叠，使用类似jQuery vertical stack的内容（演示here）。

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

Answer 1

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

我所拥有的是在主页上，有三行文字。我需要在默认情况下显示第一个，而另外两行到＆＃34; slide＆＃34;在用户滚动时。一旦所有三行都可见，则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
    ****************************************/
}

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

1 个答案: