Scroll horizontal avec la souris

**sninbull** · 21/03/2017, 23h27

Bonjour la communauté,

étudiant en webdesign, j'ai appris presque tout ce que je connais grace a ce site. A l'école, que dalle!

Je suis occupé a m'auto-apprendre le javascript et je suis au stade d'apprendre les écouteur d'évenements.

voici ma question, si vous voulez bien:

Est-il possible de commander un décalage horizontal de tout l'écran vars la droite ou vers la gauche
en placant un addEventListener sur le document?

Le but étant de creer une page Web horizontale. (5000px, par exemple et de scroller vers la gauche ou vers la droite
en utilisant le simple scroll d'une souris du visiteur).

Merci a celles et ceux qui veulent bien m'aider a résoudre ce problème.

ps: au secours.....j'ai une semaine pour rendre mon projet et ce bout de code constitue ma base #chuidanslamerde.com/je_vous_aime$Yo

**sninbull** · 21/03/2017, 23h33

-Voici la réponse Jim : ....euh... non c'est pas possible, je ne peux pas me répondre a moi-même.

*T'es un peu fou?

-Oui un peu, juste assez pour aimer les ordinateur.

*Ah moi, j'ai un cousin qui s'appelle Nordine. Nordinateur! Mwahaha

!!ça suffit vous deux, ils vont nous prendre pour des barjots dans une seule tête!

**melka one** · 22/03/2017, 11h27

jour

essai ca

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html> 
<head> 
 
<script>
 
addEventListener("load", function(){
document.body.addEventListener("wheel", function(e){
e.preventDefault();
document.body.scrollLeft+=e.deltaY<0 ? -200 : 200
}, false);}, false);
 
</script>
</head>
<body style='width:50000px;'>
 
<div id="le_div" style='height:100%;background:gray'>
 
</body>
</html>

ps: tu passera le bonjour a ton psy

**sninbull** · 22/03/2017, 13h21

Je t'aime!

Je crois que je vais pleurer pour deux raisons:

La première, parce que quelqu'un au monde m'as pris au sérieux.

La deuxieme, parce que cette personne (qui ne me connais pas) m'offre
le cadeau que j'ai rêver à voix haute.

Merci man.
Je posterai l'évolution de mon site sur cette page pour te montrer ce que j'en ai fait.
Merci, merci, merci.

Jim

**sninbull** · 22/03/2017, 21h03

Ok, j'ai créer une page de base sur laquelle je peux insérer des choses.

Maintenant, je vais trouver le moyen de supprimer
la scrollbar vertical. Pour qu'elle ne s'affiche plus du tout.
Car a cause de plein de bordel, elle s'affiche au chargement de la page
et ne disparait que lorsque je redimensionne la fenetre. c'est vraiment chiant.

Ohhh!!!

Je viens d'avoir une idée:
→utiliser ce bug pour naviguer vers le haut et vers le bas.

Pour ce faire, je vais créer des trous dans le DOM pour qu'il n'a y ait rien a
ces endroits. puisque le scroll vertical fonctionnent sur du rien du tout.

ça va etre chaud de créer des trous, mais je pense qu'avec un coup de margin de
temps en temps ca va faire une brèche dans l'espace-temps et autoriser a y caler
le curseur ni vu ni connu histoire de scroller verticalement a ces endroits précis.

**sninbull** · 22/03/2017, 21h05

Bon, OK.

overflow:hidden, trouvé en 2 secondes sur google.

Par contre, je vais utiliser le eventListener non pas sur le body mais sur
un conteneur qui a presque la taille du body. avec width:90% du body.
comme ça, je garde une zone a droite qui sera scrollable vers le haut et vers le bas.
et en plus, il n'y aura pas du rien du tout, mais une image qui indique a l'utilisateur
qu'il peut aller aussi en haut et en bas.

Ce sera un site fullscroll. Je viens d'inventer ce mot. Je viens d'inventer un concept: le FullScroll.

**sninbull** · 22/03/2017, 23h52

Bonsoir a celles ou ceux qui me lisent.

je ne comprend pas tout ce qui m'a été offert précédemment.
est ce que vous voulez bien m'indiquer ce que je n'ai pas compris s'il vous plait?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
addEventListener("load", function(){
  document.body.addEventListener("wheel", function(e){
    e.preventDefault();
    document.body.scrollLeft+=e.deltaY<0 ? -200 : 200
  }, false);}, false);

voilà, ce que je comprend:
-on ajoute un eventListener sur le body, lorsqu'il est chargé, ET que wheel est activé,on execute la fonction(le (e) je ne sais pas ce que c'est)
-e-preventDefault sur le body, c'est que ça arrete tout évènement par defaut du navigateur lorsque →wheel
-la fonction est: tu prends la valeurs su scroll gauche et tu lui mets la valeur du scroll Y avec un incrément de -200px vers la gauche et +200 vers right.
-et puis, les 2false, je ne sais pas ce que c'est.

voilà, ce que je comprends. Est ce que c'est correct? c'est quoi les deux False?

Merci d'avance, a bientot bande de geek

**sninbull** · 13/05/2017, 22h50

Bonjour

parmis les lignes de codes qu'un utilisateur m'a fourni,
je ne comprends pas bien quelques mots utilisés.
notemment les 2 "false" qui ont l'air plutot importants dans l'execution du code.

es§ ce que quelqu'un veut bien me donner leurs signification.

Je me pose ces question car souvent je voit un ou deux "false" a ces emplacements dans du Js.
et je n'arrive pas a touver ce que c'est.

merci a cas ou y a quelqu'un. ciao.

Jim

**Archimède** · 14/05/2017, 15h09

Le deuxième false correspond au usecapture de l'événement. Je te laisse regarder le lien qui explique son rôle de manière générale :
https://developer.mozilla.org/fr/doc...dEventListener.
Après le premier dans la fonction listener, je n'ai pas trop regarder...

En fait, en regardant de plus près, il y a le listener du 'load' et celui du 'wheel', donc c'est un false du usecapture pour les deux événements...

Tu vas voir ici pour une explication plus claire de usecapture :
https://www.developpez.net/forums/d1...evenements-js/

**melka one** · 14/05/2017, 19h08

oui il y a deux eventlistener a la suite d’où les deux false il y a un eventlistener pour lancer la fonction d'initialisation après le chargement de la page (load) et un autre eventlistener pour créé l'ecouteur pour le scroll le tout est condensé car j'utilise des fonction anonyme.

**sninbull** · 18/05/2017, 20h42

ok, c'est super. merci beaucoup;

je vais regarder ça un tout peu plus tard. je suis occupé a creer tout le contenu.
j'ai encore plein de truc a régler et puis hop, direction mon prof pour lui montrer que je bosse sur
mon projet. encore 2 semaines pour le valider.
merci les gars.
ça rend bien pour le moment.
voilà ce que ça donne:

http://jim02.eu/portfolio/

Scroll horizontal avec la souris

JavaScript

Discussions similaires

Partager

Partager