1

我想在 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,
});
4

4 回答 4

2

您只需要使用scrollOverflow:true并包含fullPage.js 文档scrolloverflow.min.js中详述的文件。

scrollOverflow：（默认 false）（与 IE 8 不兼容）定义是否为部分/幻灯片创建滚动，以防其内容大于其高度。当设置为 true 时，您的内容将被插件包装。考虑在 afterRender 回调中使用委托或加载其他脚本。如果将其设置为 true，则需要供应商库 scrolloverflow.min.js 并且应该在 fullPage.js 插件之前加载它。例如：

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

您在 fullPage.js 的示例文件夹中有一个可用的示例

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

<script type="text/javascript" src="vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="fullpage.js"></script>
于 2017-04-02T22:10:53.577 回答
1

您的标记似乎不是jquery.fullPage.js预期的。它期望该类的元素fp-scrollable具有子级，而您的 jsfiddle 中并非如此。

如果你移动班级，这样

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

变成

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

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

于 2017-04-02T11:17:13.323 回答
0

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

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

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

normalScrollElements: '#scroll-area'

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

于 2021-07-24T00:44:34.550 回答
-1

您的问题来自scrollOverflow: true. 这可能意味着您缺少slimScroll。你在这里有完整的细节。

在 unknown 上调用某些东西意味着您需要的对象在使用时尚未定义。使用以下方法可能是明智的：

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

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

-- EDIT bcs of -1 => 仍然为我的分析器感到自豪。#EOF

于 2017-04-02T10:58:35.813 回答