javascript - fullpage.js，具有较大的部分并禁用某些部分的滚动

Question

我正在使用的带有完整文档的 jQuery 插件:
https://github.com/alvarotrigo/fullPage.js

我想要什么:我正在尝试禁用我的第二部分以实现整页对齐效果，并且还使其高度高于常规部分(150vh 等)。

问题:我已经尝试将它添加到第 2 部分的新高度

.ok{
  width:100%;
  height:2000px;
  border:1px solid black;
}

并且还在文档中找到了一些取消section snap的方法:$.fn.fullpage.setAutoScrolling(false);
但是当我上下滚动时，某些部分回弹得太快并且不再流畅。
(例如，向下滚动到第 2 部分，然后尝试滚动到第 1 部分，它弹回得太快了)

我的 fiddle :https://jsfiddle.net/jzhang172/kemtmm9a/30/

$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    
    	afterLoad: function(anchorLink, index){
		var loadedSection = $(this);
		if(index == 1){

$.fn.fullpage.setAutoScrolling(true);   
		}
		//using index
		if(index == 2){

$.fn.fullpage.setAutoScrolling(false);   
		}
		if(index == 3){

$.fn.fullpage.setAutoScrolling(true);   
		}
		//using anchorLink
		if(anchorLink == 'secondSlide'){
			alert("Section 2 ended loading");
		}
	}

});

.section {
    text-align:center;
}
.ok{
  width:100%;
  height:2000px;
  border:1px solid black;
}
.la{
  height:200%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<div id="fullpage">
    <div class="section">One</div>
    <div class="section la">
        <div class="slide">Two 1</div>
        <div class="slide">Two 2</div>
    </div>
    <div class="section fp-auto-height"><div class="ok"></div>Three</div>
    <div class="section">Four</div>
</div>

Answer 1

我认为您的 js 代码有问题，请检查以下代码段

$('#fullpage').fullpage({
  sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
  anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage'],
  menu: '#menu',
  scrollingSpeed: 1000,
afterLoad: function(anchorLink, index){
	var loadedSection = $(this);

	//using index
	if(index == 2){
		$.fn.fullpage.setAllowScrolling(false);
	}

	//using anchorLink
	if(anchorLink == 'secondSlide'){
		alert("Section 2 ended loading");
	}
}
});

.section {
    text-align:center;
}
.ok{
  width:100%;
  height:2000px;
  border:1px solid black;
}
.la{
  height:200%;
}

<div id="fullpage">
    <div class="section">One</div>
    <div class="section">
        <div class="slide">Two 1</div>
        <div class="slide la">Two 2</div>
    </div>
    <div class="section fp-auto-height"><div class="ok"></div>Three</div>
    <div class="section">Four</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>