Scroll horizontal avec la souris

Version imprimable

21/03/2017, 23h27
sninbull

Scroll horizontal avec la souris

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:aie:
21/03/2017, 23h33
sninbull

-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!

jour

essai ca

Code:

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

22/03/2017, 13h21
sninbull

Je t'aime!:ptdr:

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
22/03/2017, 21h03
sninbull

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!!!:weird: 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.
22/03/2017, 21h05
sninbull

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.
22/03/2017, 23h52
sninbull
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:

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
13/05/2017, 22h50
sninbull

des news?

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
14/05/2017, 15h09
Archimède

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/
14/05/2017, 19h08
melka one

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.
18/05/2017, 20h42
sninbull

super cool

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/