fullpage.js를 사용하여 스크롤 구현

亚连
풀어 주다: 2018-06-07 15:10:15
원래의
1678명이 탐색했습니다.

이 글에서는 fullpage.js의 마지막 화면이 가득 차지 않을 때 스크롤하는 방법을 주로 소개합니다. HTML5로 만든 많은 웹페이지에 적합합니다. 필요하시면 배워보세요.

지난 이틀 동안 회사 웹사이트가 스크롤 플러그인 fullpage.js를 사용하여 수정되었습니다. 페이지 내용을 문제 없이 전체 화면으로 스크롤할 수 있습니다. 온라인에도 다양한 설정에 대한 문서가 있습니다.
제가 겪은 문제는 페이지의 내용이 화면에 맞지 않을 때, 위의 내용과 함께 배치하면 너무 혼잡해지고, 화면에 단독으로 배치하면 너무 공간이 커진다는 것입니다

.

하단의 바닥글 부분은 제가 혼자 보고 싶은 부분입니다. 처리 부분은 인터넷에서 여러 정보를 검색해서 요약해 두었습니다. 개인적으로는 나중에 참고할 수 있도록 글을 작성하는 것이 가장 쉬운 것 같습니다.

  <!--footer及倒数第二屏的HTML-->
  <body data-spy="scroll">
   <p id="dowebok" class="container-fluid">
    <p class="section" id="nextS">
      <p class="sect ">
          <p class="sectcenter4"></p>
      </p>
      <p class="sect sectbg2">
        <p class="container">
          <p class="sectcenter5"></p>
        </p>
      </p>
    </p>
    <p class="section footerss"><footer class="footer" id="footer"></footer></p>
   </p>
  </body>
로그인 후 복사
    //初始化滚屏的一些内容,最重要的是设置好锚点,这里重点是最后一屏(footer)的锚点footerl
    $(&#39;#dowebok&#39;).fullpage({
      verticalCentered: false,
      resize: true,
      navigation: true,
      anchors: [&#39;section-1&#39;, &#39;section-2&#39;, &#39;lastScreen&#39;,&#39;footerl&#39;],
    });
로그인 후 복사

이것을 작성하고 나면 아래와 같은 효과가 전체 바닥글이 한 화면을 차지하고 중앙에 세로로 표시됩니다.

원하는 효과에 따라 바닥글을 #nextS 화면에 가깝게(세로 중앙에 위치하지 않음) + #nextS 화면에 도달할 때 스크롤 거리가 한 화면이 될 수 없도록 해야 합니다. (바닥글의 높이여야 합니다).
전체 아이디어에 따라 먼저 css의 문제를 해결하세요

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

다음으로, fullpage.js의 문제를 수정하세요. 참조된 fullpage.js 파일에서 PerformMovement 메소드를 찾아 수정하세요. 효과 (바닥글은 이전 화면 옆에 있고 스크롤 높이는 바닥글의 높이입니다)

function performMovement(v){ 
   // using CSS3 translate functionality 
    if (options.css3 && options.autoScrolling && !options.scrollBar) { 
     if (v.anchorLink == &#39;footerl&#39;){ //当滚屏到最后一屏时间 
       footer_a = $(&#39;#nextS&#39;).height();//倒数第二屏的高度 
       footer_h = $(&#39;#footer&#39;).height(); //footer的高度
        var translate3d = &#39;translate3d(0px, -&#39; + (v.dtop - footer_a + footer_h) + &#39;px, 0px)&#39;; 
      }else{ 
       var translate3d = &#39;translate3d(0px, -&#39; + v.dtop + &#39;px, 0px)&#39;; 
     } 
     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); 
      }); 
   } 
 }
로그인 후 복사

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다. .

관련 기사:

vue 코딩 스타일에 대한 자세한 설명

vue에서 웹팩 패키징 최적화를 구현하는 방법

vue와 반응을 사용하여 확장 및 축소 효과 달성

위 내용은 fullpage.js를 사용하여 스크롤 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿