Scrollable div à l'intérieur de la section Fullpage.js ne fonctionne pas

Je veux avoir un div scrollable dans une section de fullpage.js mais quand je scrollOverflow: true inclus j'obtenir cette erreur: Cannot read property 'scrollHeight' of undefined.Scrollable div à l'intérieur de la section Fullpage.js ne fonctionne pas

La bibliothèque scrollOverflow est inclus :

http://jsfiddle.net/97tbk/1827/

Je me demande ce que je manque:

$('#fullpage').fullpage({ 
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'], 
    scrollOverflow: true 
}); 
$('.fp-scrollable').slimScroll({ 
    alwaysVisible: true, 
    color: 'black', 
    size: '10px', 
    allowPageScroll: true, 
});

Source

2017-04-02 Claudiu Creanga

-1

Votre balisage semble ne pas être ce que jquery.fullPage.js attend. Il s'attend à ce qu'un élément de la classe fp-scrollable ait des enfants, ce qui n'est pas le cas dans votre jsfiddle.

Si vous déplacez la classe afin que

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

devient

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

vous verrez fonctionner. Peut-être que ce n'est pas le balisage que vous voulez finir, peut-être que vous voulez nicher davantage .test à la place, mais peu importe ce que cela vous donne une idée sur la façon de s'attaquer à l'erreur.

Source

2017-04-02 11:17:13 m1kael

Je ne sais pas pourquoi vous êtes downvoted mais vous avez raison. merci –

Ne sait pas non plus. De rien, content que cela vous a aidé. – m1kael

Je suis le créateur de fullPage.js et j'ai voté contre. 'fp-scrollable' est une classe interne utilisée par fullPage.js et ne devrait pas être ajoutée par les développeurs. Lors de l'utilisation de 'scrollOverflow: true', fullPage.js ajoutera la classe requise là où elle en a besoin. De plus, il appelle 'slimScroll()', ce qui n'a plus de sens car fullPage.js n'utilise pas slimScroll mais iScroll.js. Et s'il veut juste un div défilant, il pourrait tout aussi bien utiliser 'normalScrollElements'. Oh ... et la solution proposée [ne fonctionne pas de toute façon] (http://jsfiddle.net/97tbk/1831/). – Alvaro

-1

Votre question com es de scrollOverflow: true. Cela peut vouloir dire que vous avez besoin de slimScroll. Vous avez tous les détails here. Appeler quelque chose sur inconnu signifie que l'objet dont vous avez besoin n'a pas encore été défini au moment de l'utilisation. Il peut être judicieux d'utiliser:

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

Pour éviter les problèmes. Bien que cela ne résout pas votre problème actuel.

- EDIT bcs de -1 => Toujours fier de mon anser. #EOF

Source

2017-04-02 10:58:35

Vous étiez probablement downvoted par Alvaro, le créateur de fullpage.js. et la raison en est évidemment que vous avez suggéré d'utiliser slimScroll même si fullpage utilise iScroll. Regardez les commentaires sur la réponse acceptée. –

Vous avez juste besoin d'utiliser scrollOverflow:true et d'inclure le fichier scrolloverflow.min.js comme détaillé dans 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>

Vous avez un exemple disponible dans the examples folder in fullPage.js

Source

2017-04-02 22:10:53 Alvaro

Scrollable div à l'intérieur de la section Fullpage.js ne fonctionne pas

Répondre

Questions connexes