解决fullpage尾屏半屏问题

淡淡的烟草味﹌ 2022-06-09 13:46 181阅读 0赞

fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站。

但是在写全屏网站时，我们经常会遇到最后一屏不满一屏，上下都有留白的问题。比如这样：

![Center][]

如果遇到这样的问题，我们可以这样解决(这是我之前找了好久，试了好多方法才找到的），在这里只解决尾屏不满一屏问题，关于fullpage的相关知识点就不介绍了。

**第一步：**打开fullpage.js文件，在代码中找到performMovement函数：此函数原内容是这样的：

将该函数的代码改为如下代码（这样可以让内容仅靠底部）：

1 function performMovement(v){
     2 　　// using CSS3 translate functionality
     3　　 if (options.css3 && options.autoScrolling && !options.scrollBar) {
     4 　　　　if (v.anchorLink == 'footer'){
     6 　　　　　　footer_a = $('#section-footer').height();
     7 　　　　　　footer_h = $('#footer-text').height();
     8　　　　　　 var translate3d = 'translate3d(0px, -' + (v.dtop - footer_a + footer_h) + 'px, 0px)';
     9　　　　 }else{
    12 　　　　　　var translate3d = 'translate3d(0px, -' + v.dtop + 'px, 0px)';
    13 　　　　}
    14 　　　　transformContainer(translate3d, true);
    16 　　　　setTimeout(function () {
    17 　　　　　　afterSectionLoads(v);
    18 　　　　}, options.scrollingSpeed);
    19　　 }
    20 　　// using jQuery animate
    21 　　else{
    22 　　　　var scrollSettings = getScrollSettings(v);
    23 　　　　$(scrollSettings.element).animate(
    24 　　　　　　scrollSettings.options
    25 　　　　　　, options.scrollingSpeed, options.easing).promise().done(function () { //only one single callback in case of animating  `html, body`
    26 　　　　　　afterSectionLoads(v);
    27 　　　　　});
    28 　　}
    29 }

第一步结束后效果是这样的：

![Center 1][]  
**第二步：**将fullpage.js在HTML中最后一屏自动添加的类名为fp-tableCell的元素样式display: table-cell设置为display:block !important; 这样就解决了

** (附：table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。table-cell可以让大小不固定的元素垂直居中)(这是最关键的哦)**

**最后一步结束后效果：**

**![Center 2][]**

这样修改的话，就不用再担心最后一屏不满一屏的问题了！！！

[Center]: /images/20220609/a2df54a9dd7f4232bcd19f61cc8c272f.png
[Center 1]: /images/20220609/26bc4d25451e4387b2c5ff6e2c9525f1.png
[Center 2]: /images/20220609/9dc2d3a6371e4c91a231cc4e2190ac2e.png