全屏滚动模式

在过去的两天里，fullpage.js被用作滚动插件，页面内容的全屏滚动不成问题。互联网上也记录了各种设置。我遇到的问题是，当页面的内容对屏幕不满意的时候，和上面的内容放在一起太拥挤了，单独放一个屏幕在空间上很尴尬。

底部的页脚部分是我想单独处理的部分。我从网上搜了各种资料，总结了一下，个人找到了写文章最简单的方法，以供以后参考。

！-倒数第二个屏幕的页脚和html正文数据-spy=' scroll ' Div id=' dowebok ' class=' container-fluid ' Div class=' section ' id=' next s ' Div class=' sectec enter 4 '/Div/Div class=' section section BG 2 ' Div class=' container ' Div class=' section center 5 '/Div/Div/Div/Div class=' section foots ' footer class=' footer ' id=' footer '/footer/Div/Div/body//初始化一些内容这里的焦点是最后一个屏幕的锚点(页脚):页脚$ ('# dowebok ')。full page({垂直居中： false，调整大小： true，导航： true，锚点3360 ['section-1 '，' section-2 '，'最后一屏'，'写完这些，就达到了下图所示的效果。整个页脚占据一个屏幕，垂直居中显示。

根据要达到的效果，当页脚紧挨着屏幕#nextS(不是垂直居中)到屏幕#nextS时，再次向下滚动的距离不能是一屏(必须是页脚的高度)。按照整体思路，先解决css的问题。section .页脚. FP-table cell {//修改最后一个屏幕显示属性display:块！重要；}//页脚显示在#nextS屏幕旁边，并出现在底部

修改下面fullpage.js的问题，在引用的fullpage.js文件中找到performMovement的方法，按照下面的方法进行修改，达到想要的效果(页脚在前一屏旁边，滚动高度为页脚的高度)

函数performMovement(v){ //使用CSS3 translate功能if(options . CSS3 options . autoscrolling！选项。scroll bar){ if(v . anchor link==' footer '){//滚动到最后一个屏幕时，footer_a=$('#nextS ')。高度()；//倒数第二个屏幕页脚的高度_h=$('#footer ')。高度()；footer var translate3d的高度=' translate3d (0px，'(v.dtop-footer _ a footer _ h)' px，0px)'；} else { var translate 3d=' translate 3d(0px，v.dtop ' px，0px ')；} transform container(translate 3d，true)；setTimeout(函数(){ after sectionloads(v))；}，options . scrollingsspeed)；} //使用jQuery animate else { var scroll settings=getscroll settings(v)；$(scrollSettings.element)。动画(滚动设置.选项，选项.滚动速度，选项.放松)。承诺()。done(function(){//在动画化` html，body` afterSectionLoads(v)的情况下只有一个回调)；});}}这次修改后，就不用担心最后一屏不满意屏幕的问题了。