javascript - Fullpage.js 部分内的可滚动 div 不起作用

Question

我想在 fullpage.js 的一部分中有一个可滚动的 div，但是当我包含 scrollOverflow: true 时，我收到此错误:无法读取未定义的属性“scrollHeight”。

包含 scrollOverflow 库:

http://jsfiddle.net/97tbk/1827/

我想知道我错过了什么:

$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    scrollOverflow: true
});
$('.fp-scrollable').slimScroll({
    alwaysVisible: true,
    color: 'black',
    size: '10px',
    allowPageScroll: true,
});

Answer 1

您只需要使用 scrollOverflow:true 并包含 scrolloverflow.min.js 文件，详见 the fullPage.js docs .

scrollOverflow: (default false) (not compatible with IE 8) defines whether or not to create a scroll for the section/slide in case its content is bigger than the height of it. When set to true, your content will be wrapped by the plugin. Consider using delegation or load your other scripts in the afterRender callback. In case of setting it to true, it requires the vendor library scrolloverflow.min.js and it should be loaded before the fullPage.js plugin. For example:

<script type="text/javascript" src="vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>

您在 the examples folder in fullPage.js 中有可用的示例

对于 fullPage.js 版本 3，它几乎是相同的:

<script type="text/javascript" src="vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="fullpage.js"></script>