fullpage.js:正常滚动特定部分? [英] fullpage.js: normal scroll for particular sections?

问题描述

我正在根据最新的fullpage.js版本(开发者许可)构建一个包含多个部分的复杂页面.我有3个具有自动滚动功能的全高部分，然后还有3个子部分.在代码中，它基本上是这样的:

I am building a complex page with multiple sections based on the latest fullpage.js release (developer license). I have 3 full-height sections with auto scroll and then 3 more sub-sections. In the code it basically looks like this:

<div id="fullpage">
   <div class="section">content</div>
   <div class="section">content</div>
   <div class="section">content</div>
   ...
   <div class="section sub-section">content</div>
   <div class="section sub-section">content</div>
   <div class="section sub-section">content</div>
</div>

我希望这些小节具有正常的滚动，这可能吗?

I want these sub-sections to have a normal scroll, is this possible?

推荐答案

fullPage.js还没有提供.您最多可以做的是将所有这些最后的部分都包含在网站的最后一个部分中，然后使用 scrollOverflow:true 来模拟正常的滚动行为，如

Not something fullPage.js provides yet. The most you can do is include all those last sections inside the last section of your site and then use scrollOverflow:true to emulate the normal scroll behaviour as in this example.

请参见此在线演示

<div id="fullpage">
   <div class="section">content</div>
   <div class="section">content</div>
   <div class="section">content</div>
   <div class="section">
       <div class="sub-section">sub content</div>
       <div class="sub-section">sub content</div>
       <div class="sub-section">sub content</div>
    </div>
</div>

使用类似这样的内容:

sub-section{
  height: 100vh;
  width: 100%;
}
.sub-section{
  background: red;
}
.sub-section:nth-child(1){
  background: red;
}
.sub-section:nth-child(2){
  background: blue;
}

这篇关于fullpage.js:正常滚动特定部分?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！