fullpage.js最后一屏不满一屏时，滚动方式

Rocko 发布于2019-08-30 13:54 / 1941人阅读

摘要：根据要实现的效果，要做的就是让紧挨着这一屏不垂直居中到这一屏的时候，再往下的滚动距离就不能是一屏了必须是的高度。

这两天公司网页改版用到fullpage.js这个滚屏插件，页面内容整屏的滚动，不成问题，各种设置在网上也都有文档。
而我遇到的问题就是，页面内容不满屏的时候，和上面的内容放一块就太挤，多带带放一屏就太空，好尴尬的说

底部的footer部分就是我要多带带处理的部分，从网上搜了各种资料，总结了一下，个人觉着最简单的方法，写一篇文章以便以后查阅。

        //初始化滚屏的一些内容，最重要的是设置好锚点，这里重点是最后一屏（footer）的锚点footerl
        $("#dowebok").fullpage({
            verticalCentered: false,
            resize: true,
            navigation: true,
            anchors: ["section-1", "section-2", "lastScreen","footerl"],
        });

写完这些，实现的就是下面如图的效果，整个footer占了一屏，并且是垂直居中显示的。

根据要实现的效果，要做的就是让footer紧挨着#nextS这一屏（不垂直居中）+到#nextS这一屏的时候，再往下的滚动距离就不能是一屏了（必须是footer的高度）。
按着整个思路，先解决css的问题

    .section.footerss .fp-tableCell{//修改最后一屏display属性
        display: block!important;
    }
//实现footer紧挨着#nextS这一屏显示，底部出现

下面修改fullpage.js的问题，在引用的fullpage.js文件中找到performMovement这个方法，按照如下方法，修改一下，就可以达到想要的效果（footer紧挨着上一屏，并且滚动的高度是footer的height）

function performMovement(v){  
  　　// using CSS3 translate functionality  
 　　 if (options.css3 && options.autoScrolling && !options.scrollBar) {  
  　　　　if (v.anchorLink == "footerl"){ //当滚屏到最后一屏时间 
  　　　　　　footer_a = $("#nextS").height();//倒数第二屏的高度  
  　　　　　　footer_h = $("#footer").height();  //footer的高度
 　　　　　　 var translate3d = "translate3d(0px, -" + (v.dtop - footer_a + footer_h) + "px, 0px)";  
 　　　　 }else{  
 　　　　　　var translate3d = "translate3d(0px, -" + v.dtop + "px, 0px)";  
 　　　　}  
 　　　　transformContainer(translate3d, true);  
 　　　　setTimeout(function () {  
 　　　　　　afterSectionLoads(v);  
 　　　　}, options.scrollingSpeed);  
　　 }  
 　　// using jQuery animate  
 　　else{  
 　　　　var scrollSettings = getScrollSettings(v);  
 　　　　$(scrollSettings.element).animate(  
 　　　　　　scrollSettings.options  
 　　　　　　, options.scrollingSpeed, options.easing).promise().done(function () { //only one single callback in case of animating  `html, body`  
 　　　　　　afterSectionLoads(v);  
 　　　　　});  
 　　}  
 }

这样修改了之后，就不用担心最后一屏不满屏的问题了。

GPU云服务器云服务器一屏时 html5 一屏高度 fullpage.js js滚动条到最后数据自动加载

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115623.html

fullpage.js最后一屏不满一屏时，滚动方式

摘要：根据要实现的效果，要做的就是让紧挨着这一屏不垂直居中到这一屏的时候，再往下的滚动距离就不能是一屏了必须是的高度。这两天公司网页改版用到fullpage.js这个滚屏插件，页面内容整屏的滚动，不成问题，各种设置在网上也都有文档。而我遇到的问题就是，页面内容不满屏的时候，和上面的内容放一块就太挤，单独放一屏就太空，好尴尬的说showImg(https://segmentfault.com...

stdying 2019-08-26 11:38 评论0 收藏0
fullpage.js最后一屏不满一屏时，滚动方式

摘要：根据要实现的效果，要做的就是让紧挨着这一屏不垂直居中到这一屏的时候，再往下的滚动距离就不能是一屏了必须是的高度。这两天公司网页改版用到fullpage.js这个滚屏插件，页面内容整屏的滚动，不成问题，各种设置在网上也都有文档。而我遇到的问题就是，页面内容不满屏的时候，和上面的内容放一块就太挤，单独放一屏就太空，好尴尬的说showImg(https://segmentfault.com...

MockingBird 2019-08-01 18:33 评论0 收藏0
fullpage使用

摘要：的地址首先已经更新到版本了，并且从版本摒弃了的依赖，并且之前多种语言对开发者友好。但是为了兼容不能使用版本，只能使用版本及其以下，虽然说兼容但是实际上并没有兼容。 fullpage的git地址首先fullpage 已经更新到3.x版本了，并且从3.x版本摒弃了jQuery的依赖，并且之前多种语言对开发者友好。但是为了兼容ie8不能使用3.x版本，只能使用2.8.9版本及其以下，虽然...

pkwenda 2019-08-26 14:06 评论0 收藏0
ios局部滚动的坑及解决方案

摘要：起因最近几天在写一个滚动加载更多数据的插件，为局部滚动写时，遇到了很多局部滚动的坑，在这里分享一下这些坑的解决方案。约定把产生滚动条的元素称之为视窗全局滚动滚动条在或者父级元素上。坑一浏览器局部滚动默认没有弹性滚动的效果。起因最近几天在写一个滚动加载更多数据的插件(Scrollload)，为局部滚动写demo时，遇到了很多局部滚动的坑，在这里分享一下这些坑的解决方案。以下的坑只针对...

yhaolpz 2019-08-20 13:41 评论0 收藏0
移动端键盘和光标的兼容那点事

摘要：解决方法如果使用页面数据不超过一屏禁止滚动，那么即使变成了页面也不会有什么变化。作者：@micky思 @wupq @yewq 在H5的开发中，个人的制作页面布局习性不同，多多少少会产生在真机上input的光标和键盘的弹出会出现的各种BUG，文中整理了部分遇到的问题，欢迎新增 ios移动端输入框上浮导致输入位置偏移问题原因：遮罩层定位为fixed，当键盘弹起时，ios11以及以下...

XboxYan 2019-08-02 15:32 评论0 收藏0