2017-04-02 117 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