元素或部分中的部分滚动-部分无法正确显示

问题描述

我正在建立一个需要部分滚动的网站。我通过在wordpress仪表板中添加以下代码来创建部分滚动功能。

jQuery(document).ready(function($) {
    $('#fullpage').fullpage({
        //options here
        scrollingSpeed: 700,navigation: true,slidesNavigation: true,verticalCentered:true,//Design
    controlArrows: true,verticalCentered: true,sectionsColor : ['#ccc','#fff'],paddingTop: '0px',paddingBottom: '0px',fixedElements: '#header,.footer',responsiveWidth: 0,responsiveHeight: 0,responsiveSlides: false,parallax: false,parallaxOptions: {type: 'reveal',percentage: 62,property: 'translate'},cards: false,cardsOptions: {perspective: 100,fadeContent: true,fadeBackground: true},//Custom selectors
    sectionSelector: '.section',slideselector: '.slide',lazyLoading: true,});
    //methods
    $.fn.fullpage.setAllowScrolling(true);
});

以及

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.extensions.min.js"></script>

然后，我通过在elementor或pro中制作模板来创建网站，然后将html添加到实际页面中，以请求通过模板ID查看模板。

滚动效果本身效果很好，但是显示的部分（模板）在屏幕下方掉了100px，换句话说，它们太长了，无法适应高度。我已经尝试了elementor内的大多数部分设置来解决此问题，并将此代码添加到每个单独的模板中

selector{ 
    height: calc(100vh - 90px);
}

我添加了最后一部分代码，因为模板中的“适合hieght”选项没有考虑导航栏，因此我怀疑这是问题所在，因为偏移量大约是导航栏的高度，但它不起作用。 >

关于我可能做错了什么的任何建议，或者一些可以解决此问题的代码建议？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

custom-scrolling elementor html javascript wordpress