IdentifiantMot de passe
Loading...
Mot de passe oubli� ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les r�ponses en temps r�el, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

D�tecter le scroll vertical


Sujet :

JavaScript

  1. #21
    Membre �clair�
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    731
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 731
    Par d�faut
    Ok, je coche r�solu.

    Merci pour ton aide.

  2. #22
    Membre �clair�
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    731
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 731
    Par d�faut
    Bonjour,

    Apr�s des semaines de mise en production j'ai d�couvert un effet de bord.

    En gros j'ai deux blocs.
    Il faut aussi tenir compte de leur largeur car autrement ils peuvent se chevaucher si l'utilisateur scrolle vers la gauche

    Code original :

    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
    window.onscroll = function() {myFunction()};
     
    function myFunction() {
    var x = document.body.scrollTop || document.documentElement.scrollTop;
    var h = document.getElementById("panier").offsetHeight;
    var b = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 
     
    if (x > 100 && h < b) 
    {
    document.getElementById("panier").className = "fixed";
    }
    else
    {
    document.getElementById("panier").className = "";
    }   
    }
    Code modifi� :

    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
    20
    21
    window.onscroll = function() {myFunction()};
     
    function myFunction() {
    var x = document.body.scrollTop || document.documentElement.scrollTop;
    var h = document.getElementById("panier").offsetHeight;
    var b = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
     
    var a = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
     
    var v = document.getElementById("panier").offsetWidth;
    var w = document.getElementById("recherche").offsetWidth;
     
    if (x > 100 && h < b && (v + w) < a) 
    {
    document.getElementById("panier").className = "fixed";
    }
    else
    {
    document.getElementById("panier").className = "";
    }   
    }
    Ne marche pas.
    Je pense que mes variables sont bonnes.

    (v + w) dans le if calcule-t-il bien la somme ?

    Merci d'avance.

  3. #23
    Membre �clair�
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    731
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 731
    Par d�faut
    Bonjour,

    Plut�t que de s'ennuyer � calculer les largeurs est-il possible de d�tecter l'existence d'une barre de d�filement horizontale ?

    if (x > 100 && h < b && pas de barre de d�filement horizontale)

  4. #24
    Expert confirm�
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 100
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activit� : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 100
    Par d�faut
    L�apparence des barres de d�filement peut varier d�un navigateur � l�autre, d�un OS � l�autre, et m�me d�un th�me visuel � l�autre sous le m�me OS. Sous un Linux avec le bureau Gnome par exemple, il existe des centaines (peut-�tre des milliers) de th�mes donnant des apparences tr�s diverses � la barre de d�filement, allant de la bonne vielle barre rectangulaire � largeur fixe, � la barre � invisible � qui ne s�affiche que quand on approche le curseur de la souris. � cause de cette vari�t�, on ne peut pas coder en dur une hauteur/largeur de barre dans un script.

    La page D�terminer les dimensions d�un �l�ment donne des informations importantes. On y apprend que offsetWidth nous donne la largeur occup�e par l��l�ment, bordures et barre de d�filement compris, tandis que clientWidth nous donne la largeur visible sans bordures ni barre. Pour d�terminer la pr�sence de la barre, il faut donc faire la diff�rence entre offsetWidth et clientWidth plus les bordures, et comparer cette valeur � 0.

    Code HTML : 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
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    <!DOCTYPE html>
    <html lang="fr">
    <head>
      <meta charset="utf-8">
      <title>Largeur de la barre de défilement</title>
      <style>
     
      #parent, #enfant { border: solid thin gray;
                       }
     
      #parent { width: 75%;
                height: 200px;
              }
     
      #enfant { background-color: #FB4;
                margin: 1rem;
                width: 120%;
                height: 300px;
              }
     
      .overflow-visible { overflow: visible; }
      .overflow-hidden  { overflow: hidden;  }
      .overflow-scroll  { overflow: scroll;  }
     
      #parent::before { position: absolute;
                        display: block;
                      }
     
      .overflow-visible::before { content: "overflow: visible"; }
      .overflow-hidden::before  { content: "overflow: hidden";  }
      .overflow-scroll::before  { content: "overflow: scroll";  }
     
      </style>
    </head>
    <body>
     
    <div id="parent" class="overflow-visible">
      <div id="enfant"></div>
    </div>
     
    <button>Changer l’overflow</button>
     
    <pre id="log"></pre>
     
    <script> "use strict";
     
    let $parent  = document.querySelector("#parent");
    let $enfant  = document.querySelector("#enfant");
    let $bouton  = document.querySelector("button");
    let $log     = document.querySelector("#log");
     
    function logDifference() {
      let cStyle = getComputedStyle($parent);
      let totalBorderWidth = Number.parseInt(cStyle.borderLeftWidth, 10) +
        Number.parseInt(cStyle.borderRightWidth, 10);
     
      $log.textContent += "différence = " +
        ($parent.offsetWidth - $parent.clientWidth - totalBorderWidth) + "\n";
    }
     
    $bouton.addEventListener("click", function (event) {
      switch ($parent.className) {
        case "overflow-visible": $parent.className = "overflow-hidden";  break;
        case "overflow-hidden":  $parent.className = "overflow-scroll";  break;
        default:                 $parent.className = "overflow-visible"; break;
      }
      logDifference();
    });
     
    logDifference();
     
    </script>
    </body>
    </html>
    La FAQ JavaScript � Les cours JavaScript
    Touche F12 = la console → l�outil indispensable pour d�velopper en JavaScript !

  5. #25
    Membre �clair�
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    731
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 731
    Par d�faut
    Bonjour,

    Merci de ta r�ponse.

    Je compare ces deux valeurs et cela semble bien marcher :

    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    var a = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
     
    var w = document.body.scrollWidth || document.documentElement.scrollWidth;
    Je vais aussi faire un essai avec scrollLeft.

+ R�pondre � la discussion
Cette discussion est r�solue.
Page 2 sur 2 Premi�rePremi�re 12

Discussions similaires

  1. D�tecter le scroll dans la TStringGrid
    Par Delphi-ne dans le forum Delphi
    R�ponses: 1
    Dernier message: 31/10/2006, 11h03
  2. [winAPI] Notification de scroll vertical de listbox ?
    Par kidpaddle2 dans le forum Windows
    R�ponses: 3
    Dernier message: 19/07/2006, 15h59
  3. [winAPI] Scrolling vertical listbox ?
    Par kidpaddle2 dans le forum Windows
    R�ponses: 2
    Dernier message: 22/05/2006, 18h57
  4. [IFrame] Avoir seulement un scroll vertical
    Par Etanne dans le forum Balisage (X)HTML et validation W3C
    R�ponses: 6
    Dernier message: 19/09/2005, 11h33
  5. scrolling vertical et horizontal
    Par myriam dans le forum MFC
    R�ponses: 2
    Dernier message: 24/01/2003, 17h06

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