fullPage js，单独的autoscroll

Question

我对fullPage.js有问题，我有5节，我想分开自动卷，第1节到第3节使用自动卷轴，第4.1节到4.2用普通卷轴，有什么想法吗？这是我的密码

​

 $(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);
        }
      }
    });
  });

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

​

Answer 1

fullPage.js没有为它提供任何解决方案。您必须自己编写代码，而且可能不是很完美。

最多只能使用函数setAutoScrolling，并通过使用回调打开和关闭autoScrolling，但这将导致不理想的结果。例如：

• 从1到2的autoScrolling
• 使用autoScrolling回调关闭第2节中的onLeave
• 从2开始正常滚动
• 从2到1的滚动不会使用autoScrolling完成，因为您必须打开onLeave回调，只有当视图中第1部分的内容大于第2部分的内容时才会触发该回调

在线复制

$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    fitToSection:false,
    //events
    onLeave: function(index, nextIndex, direction){
        if (nextIndex ===1){
            $.fn.fullpage.setAutoScrolling(true);
        }
        else if(nextIndex ===2){
            $.fn.fullpage.setAutoScrolling(false);
        }
    },
    afterLoad: function(anchorLink, index){},

});