Bonsoir à tous,
J'e suis entrain de réalisé un site en onepage vertical, mais je souhaiterai que l'utilisateur ne puisse pas scroller de lui même mais qu'il puisse accéder aux pages souhaitées uniquement au clic sur les onglets.

Je suis novice et je n'ai aucune idée de comment procéder, je n'ai pas trouver de site qui proposé ce genre de fonctionnement...
Cela est-il faisable ?

Par avance merci,
Smiley smile
Il suffit de supprimer la barre de défilement en CSS, comme ceci :

html { overflow-y: hidden; } 


Toutefois, cela soulève quelques questions...

Les contenus de tes "pages" s'adaptent-t-il bien à la hauteur de toutes les fenêtres de tous les navigateurs dans tous les cas possibles ? Certains utilisateurs peuvent avoir de multiples barres d'outils dans leurs navigateurs ; sur de grands écrans, des utilisateurs peuvent ne pas afficher leurs applications en plein écran, etc, etc.

Sinon, tu peux doter tout conteneur d'une barre de défilement avec la même propriété et la valeur visible ou auto :

main { overflow-y: visible }


ou :

main { overflow-y:auto }


Dans le dernier cas, la scrollbar est affichée uniquement si le contenu excède la hauteur du conteneur.

Toutefois, il est toujours risqué de briser les habitudes des utilisateurs.
salut,
la propriété "overlow" ne bloquera pas le scroll, elle sert uniquement à gérer les débordements de contenu.
C'est généralement une très mauvaise idée de vouloir faire ça mais tu peux toujours passer par du JS.
Il s'agira de bloquer tout ce qui permet de scroller à savoir:
- les touches directionnelles
- touches début / fin
- touche page suivante / page précédente
- barre d'espacement
- molette de la souris

et j'en rate peut être d'autres.
Tu comprendras que d'après la liste précédente, tu empêcheras l'utilisateur de faire usage de certaines touches du clavier importantes et tu le contrains à quelque chose de très désagréable.

function disableScroll(e){
	
	if (e.keyCode) {
		/^(32|33|34|35|36|38|40)$/.test(e.keyCode) && e.preventDefault();
	}else {
		e.preventDefault();
	}

}

addEventListener("mousewheel", disableScroll, false);
addEventListener("DOMMouseScroll", disableScroll, false);
addEventListener("keydown", disableScroll, false);


Il est à noter que sur un écran tactile, le procédé change.

EDIT: assez tardif mais je viens de me rendre compte en revoyant.
J'ai déjà utilisé une méthode pour bloquer le scroll durant une animation qui se lançait pendant le chargement d'un de mes sites.
Ça m'a l'air plus simple :

window.addEventListener("scroll", function (e){
	
	window.scrollTo(0,0);
	
}, false);

Modifié par Zelalsan (22 Jan 2015 - 00:44)