fullpage.js,包含更大的部分并禁用某些部分的滚动

时间:2017-08-09 04:20:11

标签: javascript jquery html css3 fullpage.js

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

我想要的是什么:我试图让我的第二部分禁用整页捕捉效果,并且它的高度也比常规部分(150vh等)高。

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

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

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

我的小提琴: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>

1 个答案:

答案 0 :(得分:0)

我认为您的js代码存在问题,请查看以下代码段

&#13;
&#13;
$('#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");
	}
}
});
&#13;
.section {
    text-align:center;
}
.ok{
  width:100%;
  height:2000px;
  border:1px solid black;
}
.la{
  height:200%;
}
&#13;
<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>
&#13;
&#13;
&#13;

相关问题