scrollOverflow 在 fullPage.js 中不起作用答案

【问题标题】：scrollOverflow not working in fullPage.jsscrollOverflow 在 fullPage.js 中不起作用
【发布时间】：2013-11-21 02:23:04
【问题描述】：

我最近开始在一个项目中使用 fullPage.js，但我不知道如何让溢出滚动工作。我页面中的最后一个“部分”运行时间很长，因此需要垂直滚动。

这是我在<head> 标签中的代码：

<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>      
    <script type="text/javascript" src="js/jquery.slimscroll.min.js"></script>
    <script type="text/javascript" src="js/jquery.fullPage.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $.fn.fullpage({
                anchors: ['top', 'brand-or-agency', 'contact-us'],
                fixedElements: '#header',
                resize: false,
                scrollOverflow: true,
                css3: true,
                paddingTop: 100,
                loopTop: false
            });
        });
    </script>

我也在使用 Bootstrap（包括 JS），以及 jQuery validate。

我在这里还缺少什么来启用此功能吗？

【问题讨论】：

看起来还不错。您是否在 javascript 控制台中收到任何错误？您是否正确导入了slimscroll 插件？您能否在jsfiddle 中重现您的问题或添加链接或我们查看？
另外，如果您遇到一些问题，可以查看灯丝组的 OverThrow：github.com/filamentgroup/Overthrow
如果你仍然遇到这个问题，我在这里提供了一个答案stackoverflow.com/a/22305075/1260424 解决了我的问题。
Scrollbar on active slide for overflowing content with Fullpage.js的可能重复
您应该向我们提供更多信息。理想情况下可以重现您的问题。考虑到如果内容是绝对定位的，插件将无法检测部分高度，因为它的内容不会对部分最终高度产生任何影响。

标签： jquery html twitter-bootstrap responsive-design fullpage.js

【解决方案1】：

我在这里还缺少什么来启用此功能吗？

如果我理解正确，那么您所错过的只是名为 normalScrollElements 的选项。它是您定义的类/ID，然后添加到 div 元素。

    $(document).ready(function(){
        $.fn.fullpage({
            anchors: ['top', 'brand-or-agency', 'contact-us'],
            fixedElements: '#header',
            resize: false,
            scrollOverflow: true,
            css3: true,
            paddingTop: 100,
            loopTop: false,
            normalScrollElements: '#element, .element'

        });
    });

HTML

<div class='section element'> This section will scroll vertically </div>

如您所见，仍需要应用 sectionSelector “部分”。

【讨论】：

不，这与它无关。他正在申请scrollOverflow。
这对我的问题很有帮助！谢谢！