11480 sujets

JavaScript, DOM et API Web HTML5

Bonjour Smiley smile

Voilà mon problème, j'ai un projet de site ou j'utilise Fullpage.js crée par Alvaro Trigo.

J'ai une page avec mes slides verticale, a l'intérieur de chaque slide j'ai crée une div et à l'intérieur de cette div, j'insère du texte.
J'ai donc appliquer un overflow-y: scroll sur la div en question. Je souhaite bloquer le scroll pour pouvoir consulter l'articles avec le scroll si le texte et trop grand alors Alvaro à mis une propriété à rajouter qui est :
normalScrollElements: ["p"] (J'ai mis p car c'est la balise en question que je souhaite modifier.

En appliquant tout ça, c'est PARFAIT ! le scroll fonctionne pas, le slide est bloquer du coup ça ne slide pas au suivant et l'utilisateur peut lire correctement le texte dans la div, mais il ne peut plus descendre au slide suivant, seulement en utilisant les touches du clavier. Et je souhaiterais que la souris fonctionne. Mais je n'ai pas trouver de solution sur internet.

Merci à vous !
Bonjour,

Un peu de code pourrait nous être utile, surtout pour ceux qui comme moi ne connaissent pas trop fullpageJS...
Soit en collant ton code ici, soit un codepen ou autre...
Ouaip autant pour moi, je pensais que c'était compréhensible :

Voici la parti HTML :



<div id="fullpage">
<div id="section_veille_techno" class="section">
				<div id="slide_1" class="slide">
					<article class="slide_text_left">
						<h1 id="title_article">Nulla porttitor accumsan tincidunt. Curabitur arcu erat</h1>

						<p>
							<br/> Vivamus suscipit tortor eget felis porttitor volutpat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Sed porttitor lectus nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula

							<br/> Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec rutrum congue leo eget malesuada. Lorem ipsum dolor sit amet, consectetur.
							<br/>
							<br/> Donec rutrum congue leo eget malesuada.
							<br/>
							<br/> Vivamus suscipit tortor eget felis porttitor volutpat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Sed porttitor lectus nibh. Vestibulum ante ipsum primis in faucibus orci luctus
							<br/>
							<a id="archives" target="_blank" href="archives.php">Archives</a>
						</p>
					</article> 
</div>


Petite explication du HTML, pour pouvoir faire fonctionner le fullpage, suffit simplement de crée une div avec l'id fullpage, ensuite à l'interieur de celle-ci, ont met ce que l'ont veut.
Je ne vous paste pas le CSS ça n'a aucune utilité en revanche je vous paste la partie Javascript



$(document).ready(function () {
			$('#fullpage').fullpage({
				sectionsColor: ["#ffffff", "#ffffff", "#ffffff"]
				, anchors: ['Accueil', 'Veille_Techno', 'Contact']
				, normalScrollElements: ['p']
			, });
			$.fn.fullpage.setScrollingSpeed(1500);

		});



Le bout de code JS, est simplement ce que contient le script jquery.fullpage.js
Les ancres n'est actuellement pas le problème.
Le problème vient du normalScrollElements, quand je le met en place dans ma div en question ça me bloque bien le slide et j'ai mis dans le css, sur la div en question un overflow-y pour que si le texte dépasse ils puissent scroll. Ce qui fonctionne en pratique, mais.. ça me bloque l'accès au scroll avec la souris, par contre le scroll au keyboard fonctionne parfaitement.

Voilà mon problème.

Bonne soirée
Pour comprendre la question il faut étudier la façon donc fonctionne le widget et que signifie le mot page ( voir image à la fin) . Après écriture du texte ci dessous , il me semble que cela soit le comportement normal . vous bloquez l écoute de la molette de la souris sur un widget qui n est en fait qu un tag <p> sans gestion de la molette ( lire plus loin widget avec gestion de la molette ) ; le seul moyen qui reste sont les touches flèche haut/bas du clavier pour changer de section ...non ?
Sinon bizarre la documentation parle d autoscroll ....pas de scroll manuel ( souris clavier ) !!! en testant la démo en ligne , le comportement "overflow-y/x" existe t il déja par défaut : le contenu qui ne peut s afficher dans la zone du navigateur ne s affiche pas lorsque celui ci ne peut être redimensionner pour être contenu dans cette zone du navigateur . Dans la demo il existe des images 173x73px qui ne se redimensionne pas !! le contenu n 'est pas responsive !! le layout oui !! ... Me contredire si j'ecris des choses inexactes ou mal compris ........

pour voir le projet aller sur http://alvarotrigo.com/fullPage/#firstPage.

En gros le script affiche une page ( donc visible class=active ) sur un certains nombres de pages déja chargées mais invisibles ( section si seul et sous section appelé slide ) sur le client en modifiant le chemin de la page chargé (routing URL) avec un effet css transform sur la page de départ vers la page d arrivé en se basant sur la hauteur du navigateur. Le contenu de la page se recentre après modification de la taille du navigateur.

le widget fullpage est actif ( namespace) des l apparition de la balise id="fullpage"

La navigation de bas en haut fonctionne pour la souris et les touches flèche haut bas dans tous les cas . si la page section contient des pages slide ; la page section contient une barre de navigation <div class="fp-controlArrow fp-prev fp-next"> pour scroller horizontalement de droite à gauche entre les pages de type slide. Lors du scroll haut bas , la couleur du menu actif change.

Dans la demo il y a 4 éléments verticaux id=" section0 1 2 3" dont un seul actif ( class="active") , la section 1 est le seul a contenir 3 slides dont un seul est actif ( class = "active") <div style="width: 25%;" class="slide fp-slide fp-table active">
si on a x slide le width est de 100/x donc pour 4 on a 25% . la transition horizontale des slides se fait par css transform .

le problème ? : En gros la souris pour le scroll haut bas ( section) ne fonctionne pas ( seul clavier fonctionne ce qui est pas normal) lorsque l on est dans une page de type slide ou le sélecteur p se voit appliquer la propriété normalScrollElements . Dans ce cas seul le clavier flèche haut/bas fonctionne pour changer de page ( page de type section ).


Je n apporte pas de solution mais ai étudié la question en gros Il y a un problème de capture de la souris mouse wheel ? pourquoi ? quel est la zone graphique du sélecteur p ? sélecteur trop général ? comportement normal du développeur ?

si vous mettez le curseur de la souris en dehors de la zone défini par p et que vous actionnez la molette haut/bas de la souris est ce que le scroll haut/bas fonctionne ?
essayez sur la zone h1 contenant le texte Nulla porttitor accumsan tincidunt. Curabitur arcu erat
Quelle est la partie visuelle graphique du modèle de boite css ( border marging padding content ) qui est à l écoute du mouse wheel dans ce widget fullpage ?


addEventListener('mousewheel',function(event){mouseController.wheel(event)},

la documentation est sur github

la doc sur normalScrollElements: (default null) If you want to avoid the auto scroll when scrolling over some elements, this is the option you need to use. (useful for maps, scrolling divs etc.) It requires a string with the jQuery selectors for those elements. (For example: normalScrollElements: '#element1, .element2')
NB on parle dici de widget dans une page qui utilise déja la notion de scroll. par exemple google map est constitué de grid d images que l on doit mettre a jour lors du scroll ( = zoom) . Idem pour un contenu d 'un textarea ou un scrollbar vertical apparait si le contenu dépasse la hauteur du textarea. Ou est l intérêt d'utiliser cette propriété sur du texte qui par défaut n'est pas un widget qui interagit avec une notion de mouse scroll comme le fait une carte du territoire ou un formulaire textarea ?


le code js de la demo est
<script type="text/javascript">
    $(document).ready(function() {
        $('#fullpage').fullpage({
            sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
            anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
            menu: '#menu',
            css3: true,
            scrollingSpeed: 1000
        });

        $('#showExamples').click(function(e){
            e.stopPropagation();
            e.preventDefault();
            $('#examplesList').toggle();
        });

        $('html').click(function(){
            $('#examplesList').hide();
        });
    });
</script>


upload/48731-alsafullpa.jpg


L acces au code directe serait plus facile avec google chrome debug ...... pour pouvoir répondre .
Modifié par 75lionel (07 Jun 2016 - 10:04)