![](/img/trans.png)
[英]scrollOverflow / slimScroll not working properly in fullPage.js
[英]FullPage.js scrollOverflow not working properly with loaded content
我正在整页网站上工作,并决定使用Fullpage.js插件,但是在通过AJAX请求加载内容方面存在一些问题。 我使用JSON内容填充页面,由于某些原因,scrollOverflow选项无法正常工作。 更有意思的是,它在XAMPP环境中运行良好,但在实时托管环境(Bluehost)中则失败。 我感觉网站资源没有正确加载,但是我不确定这是否会/将导致问题。 没有控制台错误,并且正在加载所有资源。
初始化:
$(document).ready(function() {
$.ajax({
type: 'POST',
url: 'content.json',
dataType: 'json',
contentType: "text/json; charset=utf-8",
success: function(e) {
$('.slide').each(function(index){
console.log(index);
$(this).children('.fp-tableCell').html('<span class = "center"><div class="circle-logo"><div class="circle-fill"><i class="'+e.platform[index].i+'"></i></div></div><h1 class = "montserrat">'+e.platform[index].h+'</h1><p class = "hind">'+e.platform[index].p+'</p><span>');
});
for(var i = 0; i<e.about.length; i++){
$('#section2').children('.fp-tableCell').append('<h2 class = "montserrat">'+e.about[i].h+'</h2><p class = "hind">'+e.about[i].p+'</p>');
}
$('#section2').children('.fp-tableCell').append('<hr>');
$('#section2').children('.fp-tableCell').append('<p class = "hind">CRAFTED BY DAVE | © NATHAN</p>');
},
error: function(e){
console.log(e);
}
});
$('#downhint').click(function(){
console.log('click');
$.fn.fullpage.moveSectionDown();
});
$('#fullpage').fullpage({
sectionsColor: ['transparent', '#021b80', '#FFF'],
anchors: ['landing', 'platform', 'about'],
menu: '#menu',
scrollOverflow: true,
slidesNavigation: true,
afterLoad: function(anchorLink, index){
$('.fp-table .active').css('overflow-y','auto');
if(index == 1){
$('#menu li:nth-child(1) a').addClass('active-link');
$('#menu li:not(:nth-child(1)) a').removeClass('active-link');
}
if(index == 2){
$('#menu li:nth-child(2) a').addClass('active-link');
$('#menu li:not(:nth-child(2)) a').removeClass('active-link');
}
if(index == 3){
$('#menu li:nth-child(3) a').addClass('active-link');
$('#menu li:not(:nth-child(3)) a').removeClass('active-link');
}
}
});
$(window).scroll
});
包括:
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Hind' rel='stylesheet' type='text/css'>
<link href='css/bootstrap.min.css' rel='stylesheet' type='text/css'>
<link href='fonts/genericons/genericons/genericons.css' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="fullpage/jquery.fullPage.js"></script>
据我所知,我已经加载了所有必需的文件和脚本。 提前致谢。
根据您的最新评论。 在将新内容加载到DOM结构中之后,您需要调用$.fn.fullpage.reBuild()
。
这样,fullpage.js将重新计算内容大小并在必要时创建滚动条。
从文档 :
reBuild()更新DOM结构以适合新窗口大小或其内容。 理想与AJAX调用或站点DOM结构中的外部更改结合使用 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.