2017-04-02 102 views
0

我想有fullpage.js的段中的滚动股利但是当我包括scrollOverflow: true然后我得到这个错误:Cannot read property 'scrollHeight' of undefined.滚动DIV不工作

的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, 
}); 

回答

-1

您的标记似乎不是jquery.fullPage.js预期的。它期望一个fp-scrollable类的元素拥有子元素,这在jsfiddle中并不是这样。

如果移动类,以便

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

成为

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

你会看到它的工作。也许这不是你想要的标记,也许你想进一步嵌套.test,但是不管这给你一个关于如何解决错误的想法。

+1

我不知道你为什么会陷入低谷,但你是对的。谢谢 –

+0

不知道。不客气,很高兴这对你有所帮助。 – m1kael

+2

我是fullPage.js的创建者,我投了票。 'fp-scrollable'是fullPage.js使用的内部类,不应该由开发人员添加。 使用'scrollOverflow:true'时,fullPage.js将在需要的地方添加所需的类。 此外,他正在调用'slimScroll()',因为fullPage.js不使用slimScroll而是使用iScroll.js。 如果他只想要一个可滚动的div,他不妨使用'normalScrollElements'。噢...和建议的解决方案[不管怎么说](http://jsfiddle.net/97tbk/1831/)。 – Alvaro

-1

您的问题COM es从scrollOverflow: true。这可能意味着你错过了slimScroll。你有完整的细节here

调用未知的东西意味着您需要的对象在使用时尚未定义。这可能是明智的使用:

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

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

- EDIT bcs of -1 =>仍以我的激情为荣。 #EOF

+0

可用为例,用户很可能由阿尔瓦罗,fullpage.js的创造者downvoted。原因很明显,因为你建议使用slimScroll,即使fullpage使用iScroll。 看看接受的答案的意见。 –

0

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