fullpage.js最后一屏小于一屏时的滚动方式

时间：2023-03-31 13:54:10 CSS

这两天公司网站改版使用了fullpage.js滚动插件。整个页面内容的滚动是没有问题的，各种设置网上也有文档。.而且我遇到的问题是当页面内容没有满屏的时候，和上面的内容放在一起会太挤，单独放在一屏又会太空。不好意思说最下面的footer部分是我要单独处理的部分。查了各种资料，总结了一下，个人觉得最简单的方法就是写一篇文章，以备日后参考。

>//初始化滚屏的一些内容，最重要的是设置锚点，这里重点是最后一屏（footer）的锚点footerl$('#dowebok').fullpage({verticalCentered:false,resize:true,navigation:true,anchors:['section-1','section-2','lastScreen','footerl'],});写完这些，实现如下图，结果整个footer占了一屏，竖直显示在中间。根据要实现的效果，需要做的是让#nextS屏幕旁边的footer（不是垂直居中）+到达#nextS屏幕时，再往下滚动的距离不能是一屏（必须是footer的高度）。按照整个思路，先解决css问题。section.footers.fp-tableCell{//修改最后一屏显示属性display:block!important;}//实现footernext#nextS这个画面显示，底部出现Next，修改fullpage.js问题，在引用的fullpage.js文件中找到performMovement方法，按照下面的方法修改即可达到想要的效果(footer在上一屏旁边，滚动高度为footer高度)functionperformMovement(v){　　//使用CSS3翻译功能　　if(options.css3&&options.autoScrolling&&!options.scrollBar){if(v.anchorLink=='footerl'){//当滚动到最后一屏时　　　　　　footer_a=$('#nextS').height();//倒数第二屏的高度　　　　　　footer_h=$('#footer').height();//页脚高度　　　　　　vartranslate3d='translate3d(0px,-'+(v.dtop-footer_a+footer_h)+'px,0px)';　　　　}else{　　　　　　vartranslate3d='translate3d(0px,-'+v.dtop+'px,0px)';　　　　}　　　　transformContainer(translate3d,true);　　　　setTimeout(function(){　　　　　　afterSectionLoads(v);　　　　},options.scrollingSpeed);　　}　　//使用jQuery动画　　else{　　　　varscrollSettings=getScrollSettings(v);$(scrollSettings.element).animate(　　　　　　scrollSettings.options　　　　　　,options.scrollingSpeed,options.easing).promise().done(function(){//在动画`html的情况下只有一个回调,body`　　　　　　afterSectionLoads(v);　　　　　});　　}}这样修改后，再也不用担心最后一屏未满的问题了。

上一篇：前端面试日常3+1——Day195

下一篇：在vue项目的webpack打包中，背景图的路径问题

fullpage.js最后一屏小于一屏时的滚动方式相关文章