fullpage.js 部分中的可滚动 div 不起作用

如何解决fullpage.js 部分中的可滚动 div 不起作用

我正在使用 fullpage.js 我已经使用它创建了 11 个部分，但对于最后一个部分，我在 div 中有更多内容，但 div 不在部分内滚动。

<div class="section" id="section10">
    <div class="img_b">  <span class="icon icon--arrow icon--arrow-up" id="moveSectionUp"></span>
        <div class="intro10">
            <h1 class="sec10_h">10. There are plenty of great fresh dog food brands.</h1>
            <h4 class="sec10_sub_h">So,which dog food brand is right for your pup? There are several great options.</h4>
            <img class="nom_nom" src="https://static.insiderenvy.com/images/2021/06/28084619/Rectangle-17-12.jpg">
            <h2 class="nom_h">Nom Nom</h2>
            <p class="sec10_cont">Nom Nom offers a custom formula made for your dog based on their age,weight,body condition,and any health conditions. Their dog food was developed alongside an in-house veterinarian specializing in pet nutrition. NomNom even offers a Microbiome Testing Kit to learn more about your pet’s specific gut needs,which gives you a comprehensive analysis of your pet’s gut and what that means for their health. With NomNom,you’re not just getting delicIoUs,healthy food,you’re also given the option to participate in cutting-edge pet health technology. And even if you’re just looking for some chow for your pet pup,you can rest assured that this focus on science extends to every part of NomNom’s philosophy,right down to what ends up in your dog’s bowl.  </p>

            <img class="nom_nom" src="https://static.insiderenvy.com/images/2021/06/29080744/Rectangle-17-13.jpg">
            <h2 class="nom_h">The Farmer’s Dog</h2>
            <p class="sec10_cont">Like NomNom,The Farmer’s Dog offers gently cooked fresh food to preserve as many nutrients as possible. Their food also comes ready-to-serve,in convenient pre-portioned packs. The Farmer’s Dog has a particular focus on eco-conscIoUsness: their cardboard delivery Boxes are recyclable,and the food insulation pack inside is not only compostable,but dissolvable: just run some water over it in your sink and it’ll melt right away! The food storage container is also biodegradable,and all of their materials are BPA-free and non-toxic. If you have a changing schedule or travel often,The Farmer’s Dog might be right for you: they make it easy to change your shipping address,frequency of deliveries,and amount of food ordered.   </p>
        
            <img class="nom_nom" src="https://static.insiderenvy.com/images/2021/06/29080747/Rectangle-18.jpg">
            <h2 class="nom_h">Darwin's</h2>
            <p class="sec10_cont">Some dog owners believe raw Feeding is the healthiest option for their pet. If this sounds intriguing to you,we think Darwin’s Natural Pet Food is the best raw pet food delivery service around. Ordering from Darwin’s ensures your pet is getting fresh,safe,and contaminant-free raw food. With a high-quality mix of 75% meat to 25% vegetables,their food is full of nutrients and minimally processed. Options include chicken,duck,turkey,beef,and lamb. And,they offer free shipping!  </p>

            <img class="nom_nom" src="https://static.insiderenvy.com/images/2021/06/29080752/Rectangle-17-14.jpg">
            <h2 class="nom_h">Ollie</h2>
            <p class="sec10_cont">If you’re still not quite sure if you’re ready to make the switch to fresh dog food,Ollie is a great option to try. Not only do they offer 100% money-back guarantees on your first order,they also include custom instructions in every delivery to help you and your pet make a smooth transition to fresh food. We love the level of care Ollie has put into making sure that the switch to fresh food is as easy for owners as it is healthy for pets. Ollie’s fresh dog food contains absolutely no fillers: their meat-forward recipes also contain fruit,plant-based proteins,leafy greens and root vegetables to bulk up even more on vital nutrients. Their questionnaire makes sure your pet is matched with the right blend for their specific needs.   </p>


        </div>
    </div>
</div>

JS代码

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script type="text/javascript" src="../dist/scrolloverflow.min.js"></script>
<script type="text/javascript" src="../dist/fullpage.js"></script>
<script type="text/javascript" src="examples.js"></script>

<script type="text/javascript">
    function initialization(){
        var myFullpage = new fullpage('#myContainer',{
            
            resize: true,animateAnchor:true,scrolloverflow: true,autoScrolling:true,responsive: 900,fitSection: true,navigation:true,continuousvertical:false,navigationPosition: 'right',normalScrollElements: '#section10'
        });
    }


initialization();

</script>

我分享的代码有什么问题？

解决方法

根据the fullpage.js documentation：

normalScrollElements: (default null) Demo 如果你想在滚动某些元素时避免自动滚动，这是你需要使用的选项。 （对于地图、滚动 div 等很有用）它需要一个带有这些元素的 Javascript 选择器的字符串。 （例如：normalScrollElements: '#element1,.element2'）。 此选项不应应用于任何部分/幻灯片元素本身。

您不能将 normalScrollElements 应用于部分。 相反，您应该使用 scrollOverflow: true 选项。

ScrollOverflow example

ScrollOverflow example sourcecode