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

Question

我想在 fullpage.js 的一部分中有一个可滚动的 div 但是当我包含 scrollOverflow: true 时我得到这个错误：Cannot read property 'scrollHeight' of undefined.

包含 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。这可能意味着您缺少 slimScroll . You've got full details here.

未知调用意味着您需要的对象在使用时尚未定义。明智的做法是使用：

$(document).ready(function(){ /*code*/ });

避免出现问题。虽然它不能解决您当前的问题。

-- 编辑 -1 的 bcs => 仍然为我的回答感到自豪。 #EOF

Answer 2

您的标记似乎不是 jquery.fullPage.js 所期望的。它期望带有 class fp-scrollable 的元素有子元素，这在您的 jsfiddle 中不是这种情况。

如果您移动 class 以便

<div class="section">
    <div class="test fp-scrollable">
    ...

变成

<div class="section fp-scrollable">
    <div class="test">
    ...

你会看到它的工作。也许这不是您最终想要的标记，也许您想进一步嵌套 .test，但无论如何这都会让您了解如何解决错误。

Answer 3

您只需要使用 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>

Answer 4

您唯一需要做的就是在您希望能够在整页部分内滚动的区域上分配某种选择器

<div id="scroll-area">Some long scrollable content</div>

之后只需添加一个选项 fullpage.js

normalScrollElements: '#scroll-area'

这就是您可以在 fullpage.js 部分内滚动的所有区域

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

Scrollable div inside section of Fullpage.js doesn't work

html

javascript

css

slimscroll

fullpage.js