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

【问题标题】：Scrollable div inside section of Fullpage.js doesn't workFullpage.js 部分内的可滚动 div 不起作用
【发布时间】：2017-04-02 10:51:35
【问题描述】：

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

【问题讨论】：

标签： javascript html css fullpage.js slimscroll

【解决方案1】：

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

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>

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>

【讨论】：

还有谁能比创作者本人回答得更好！ :D

【解决方案2】：

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

如果你移动班级，那么

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

变成

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

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

【讨论】：

我不知道你为什么被否决但你是对的。谢谢
也不知道。不客气，很高兴这对你有所帮助。
我是 fullPage.js 的创建者，但我否决了它。 fp-scrollable 是 fullPage.js 使用的内部类，开发人员不应添加。当使用scrollOverflow:true 时，fullPage.js 将在需要的地方添加所需的类。此外，他正在调用slimScroll()，这不再有意义，因为 fullPage.js 不使用 slimScroll 而是 iScroll.js。如果他只想要一个可滚动的 div，他还不如直接使用normalScrollElements。哦...以及建议的解决方案doesn't work anyways.
@Alvaro 你能建议正确的解决方案吗，我还有一个查询我已经使用这个 fullpage.js 创建了 11 个部分，但是在从默认切换到第二个时它会跳过第二个并落在第三个部分跨度>
@RakhiPrajapati 在stackoverflow.com/a/43174091/1081396下方查看我对 fullpag.js 版本 2 的回答

【解决方案3】：

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

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

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

normalScrollElements: '#scroll-area'

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

【讨论】：

【解决方案4】：

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

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

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

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

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

【讨论】：

您可能被 fullpage.js 的创建者 Alvaro 否决了。原因很明显是因为您建议使用 slimScroll，即使 fullpage 使用 iScroll。查看已接受答案上的 cmets。