Question

我有fullPage.js的问题我有5节，我想分开自动滚动，第1节到第3节使用自动滚动，第4.1到4.2节使用正常滚动任何的想法？这是我的代码

＆＃13;

 $(document).ready(function(){
    var s, d;
    $('#fullpage').fullpage({
      anchors: ['anchor1', 'anchor2', 'anchor3', 'anchor41', 'anchor42'],
      menu: '#menu',
      navigation: true,
      navigationPosition: 'right',
      navigationTooltips: ['First page', 'Second page', 'Third and last jump', 'Free', 'free!!'],
      onLeave: function(index, nextIndex, direction){
            leavingSection = $(this);
            console.log(leavingSection.prop('id'));
            s = leavingSection.data('scroller');
            if(direction == "up"){
              d = leavingSection.prev().data('scroller');
            }else if(direction == "down"){
              d = leavingSection.next().data('scroller');
            }
      },
      afterLoad: function(anchorLink, index){
        var loadedSection = $(this);
        if(s=="normal" && d=="auto"){
          $.fn.fullpage.setAutoScrolling(true);
        }else if(s=="auto" && d=="normal"){
          $.fn.fullpage.setAutoScrolling(false);
        }
      }
    });
  });

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/vendors/scrolloverflow.min.js"></script>


<div id="fullpage">
      <div id="section1" class="container-fluid section" data-scroller="auto">
        <h1>Section 1</h1>
      </div>
      <div id="section2" class="container-fluid section" data-scroller="auto">
        <h1>Section 2</h1>
      </div>
      <div id="section3" class="container-fluid section" data-scroller="auto">
        <h1>Section 3</h1>
     </div>
      <div id="section41" class="container-fluid section" data-scroller="normal">
        <h1>Section 4 Submenu 1</h1>
      </div>
      <div id="section42" class="container-fluid section" data-scroller="normal">
        <h1>Section 4 Submenu 2</h1>
      </div>
   </div>

＆＃13;

Answer 1

fullPage.js没有为它提供任何解决方案。你必须自己编写代码并且可能不会是完美的。

您可以做的最多是使用函数rank并使用回调打开和关闭autoScrolling，但这会导致不良结果。如：

autoScrolling从1到2
使用setAutoScrolling回拨
从2开始正常滚动
从2滚动到1不会使用onLeave来执行此操作，因为您必须在onLeave回调上启用它，只有在第1部分的内容中才会被触发视口大于第二部分的视口

Reproduction online

autoScrolling

fullPage js，单独的autoscroll

1 个答案: