18011 sujets

Questions générales et questions de débutants

Scroll bar visible selon les ordinateurs ?

Bonjour à tous, je vous écris pour essayer de comprendre un truc qui me dépasse un peu je l'avoue.

Il semblerait que certain ordinateurs fasse apparaitre visuellement une scroll bar dans leur navigateur et d'autres non...
Voici deux captures qui illustrent ce que je viens de dire.

Capture 01 , chrome version 38.0.2125.101, la barre scroll apparaitre bien.
http://www.onkei.fr/capture01.png

Capture 02 , chrome version 38.0.2125.101, la scroll n’apparait pas, bien qu’elle soit active (avec le scroll roulette, pad…)
http://www.onkei.fr/capture02.jpg

Comment faire pour que le comportement et l’affichage soit pareil partout ?
Existe t"il un hack spécifique qui détecte quel navigateur affiche ou non la scroll bar ?

Car par rapport a ma page, cela me créer un bug suivant l’ordinateur.

Dans ma page jai 2 div, div menu et div contenu
Ma div menu doit être en position fixed et donc ne depend pas du scroll bar. donc lorsque je veux centrer cette div, cela se fait sur la totalité de la largeur de ma fenêtre.

Ma div contenu est en position relative et donc elle se centre en fonction de la largeur de la fenêtre moins la largeur de la scroll.

Exemple, ma fenêtre fait 1000px de large, ma div menu et ma div article 800px :
Et bien si jai une scroll bar,
- ma div menu se place à 100px de la gauche (grace a margin: 0 auto; ou la meme chose avec left:50% margin-left:-400px)
- ma div article se place à 96px de la gauche, car 1000px - largeur scroll(8px) = 992px (grace toujours à margin: 0px auto ou meme left:50% margin-left:-400px )
Modifié par Zadoner (14 Oct 2014 - 19:04)
Salut Zadoner,

Difficile de savoir pourquoi les scrollbars s'affichent ou pas et on ne pourra pas maîtriser les réglages de chaque client.

Du coup il faut que tu "wrap" tes 2 divs (.menu et .article) dans une autre div .wrapper qui fera 800px de large et sera centrée par margin: 0 auto; . Peu importe si la scrollbar est là ou pas, cette div se décalera et ses enfants suivront...

Voici un code test fonctionnel :
<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <style type="text/css">
    body, html{
      margin: 0;
      /* à décommenter pour ajouter une scrollbar...*/
      /*overflow: scroll;*/
    }
    .wrapper{
      width: 800px;
      margin: 0 auto;
    }
    .menu{
      position: fixed;
      z-index: 10;
      background-color: grey;
      height: 200px;
      width: 800px;

      /*optionnel*/
      font-size: 50px;
      color: white;
      opacity: 0.7;
      text-align: center;
      line-height: 200px;
    }
    .article{
      top: 200px;
      color: white;
      position: relative;
      background-color: red;

      /*optionnel*/
      font-size: 30px;
      color: white;
      padding: 30px;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="menu">Menu</div>
    <div class="article">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </div>
</body>
</html>

Je l'ai mis sur CodePen.

Tu me diras si ça résout ton problème...
Bon dev et bonne journée.
Matthieu
Modifié par MatthieuR (24 Oct 2014 - 15:44)
Sujet clos
Aller à