1. #1
    Nouveau Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    mars 2014
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : mars 2014
    Messages : 8
    Points : 1
    Points
    1

    Par défaut 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

  2. #2
    Nouveau Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    mars 2014
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : mars 2014
    Messages : 8
    Points : 1
    Points
    1

    Par défaut

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

  3. #3
    Membre éclairé
    Homme Profil pro
    chomeur
    Inscrit en
    avril 2015
    Messages
    373
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : chomeur
    Secteur : Distribution

    Informations forums :
    Inscription : avril 2015
    Messages : 373
    Points : 754
    Points
    754

    Par défaut

    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

  4. #4
    Nouveau Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    mars 2014
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : mars 2014
    Messages : 8
    Points : 1
    Points
    1

    Par défaut

    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

  5. #5
    Nouveau Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    mars 2014
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : mars 2014
    Messages : 8
    Points : 1
    Points
    1

    Par défaut

    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.

  6. #6
    Nouveau Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    mars 2014
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : mars 2014
    Messages : 8
    Points : 1
    Points
    1

    Par défaut

    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.

  7. #7
    Nouveau Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    mars 2014
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : mars 2014
    Messages : 8
    Points : 1
    Points
    1

    Par défaut

    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

  8. #8
    Nouveau Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    mars 2014
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : mars 2014
    Messages : 8
    Points : 1
    Points
    1

    Par défaut 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

  9. #9
    Membre expérimenté
    Avatar de Archimède
    Homme Profil pro
    Enseignant
    Inscrit en
    avril 2005
    Messages
    1 301
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : avril 2005
    Messages : 1 301
    Points : 1 437
    Points
    1 437

    Par défaut

    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/

  10. #10
    Membre éclairé
    Homme Profil pro
    chomeur
    Inscrit en
    avril 2015
    Messages
    373
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : chomeur
    Secteur : Distribution

    Informations forums :
    Inscription : avril 2015
    Messages : 373
    Points : 754
    Points
    754

    Par défaut

    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.

  11. #11
    Nouveau Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    mars 2014
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : mars 2014
    Messages : 8
    Points : 1
    Points
    1

    Par défaut 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/

Discussions similaires

  1. Réponses: 8
    Dernier message: 02/08/2012, 17h36
  2. Avoir un scroll horizontal avec une bonne largeur
    Par lionheart33806 dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 31/10/2011, 10h54
  3. Scroll horizontal avec colonnes fixe
    Par Saverok dans le forum AWT/SWING
    Réponses: 1
    Dernier message: 25/04/2008, 11h36
  4. Scroll avec la souris
    Par domb_st dans le forum JavaScript
    Réponses: 3
    Dernier message: 18/05/2007, 18h41
  5. synchroniser le scroll horizontal d'un Tmemo avec un Tedit
    Par bambino3996 dans le forum Composants VCL
    Réponses: 2
    Dernier message: 09/08/2005, 12h06

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo