web-dev-qa-db-fra.com

Désactiver la barre de défilement horizontale en raison d'un DIV avec position: absolue qui est en dehors de la page

J'ai un élément absolument positionné qui est "en dehors" de la page, mais je veux que les navigateurs (j'utilise Firefox 3) ne montrent pas de barres de défilement horizontales. Il semble que l'affichage d'un div positionné à gauche (par exemple, avoir "left: -20px") soit correct, et aucune barre de défilement ne soit affichée. Cependant, la même chose à droite ("droite: -20px") montre toujours la barre de défilement. Est-il possible de masquer la barre de défilement, mais de conserver le défilement standard possible? Je veux dire que je veux uniquement désactiver le défilement en raison de cet élément en position absolue, mais continuer à défiler en raison d'autres éléments (je sais que je peux désactiver complètement les barres de défilement, ce n'est pas ce que je veux).

<!DOCTYPE html>
<html>
<body>
  <div id="el1" style="position: absolute; top: 0; background-color: yellow; left: -20px;">
    element
  </div>
  <div id="el2" style="position: absolute; top: 0; background-color: yellow; right: -20px;">
    element
  </div>
  <h1>Hello</h1>
  <p>world</p>
</body>
</html>
htmlcssxhtmlscrollbarcss-position
34
Tom

Oui, c'est possible, sur votre balise html, tapez style="overflow-x: hidden". Ça fera l'affaire ...

37
Vap0r

Cela peut en fait être fait en utilisant du CSS simple sans aucune restriction sur la largeur de page, etc. Cela peut être fait par:

  1. Créez un div avec débordement caché qui est absolument positionné dans le coin supérieur gauche de la page. Faites sa largeur et sa hauteur à 100%
  2. Créez un autre div qui est le même, mais sans débordement caché
  3. Ajoutez une classe pour les divs qui entourent le contenu de celles créées, en rendant sa position relative et en lui donnant la largeur souhaitée pour le contenu de la page principale
  4. Ajoutez du contenu de cette classe dans chacune des divs que vous avez créées.

Le contenu de votre première div restera correctement aligné avec le contenu de votre deuxième div, mais tout son contenu qui dépassera le périmètre de la fenêtre sera tronqué.

Voici un exemple de travail qui maintient l'image dans une position fixe par rapport au reste du contenu, sans utiliser de JavaScript:

#widthfitter {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#contentWrapper {
  width: 100%;
  position: absolute;
  text-align: center;
  top: 0;
  left: 0;
}

.content {
  width: 600px;
  position: relative;
  text-align: left;
  margin: auto;
}
<div id="widthfitter">
  <div class="content">
    <img src="https://i.stack.imgur.com/U5V5x.png" style="position:absolute; top: 240px; left: 360px" />
  </div>
</div>
<div id="contentWrapper">
  <div class="content">
    Tested successfully on:
    <ul>
      <li>IE 8.0.6001.18702IS</li>
      <li>Google Chrome 17.0.963.46 beta</li>
      <li>Opera 10.10</li>
      <li>Konqueror 4.7.4</li>
      <li>Safari 5.1.5</li>
      <li>Firefox 10.0</li>
    </ul>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
      ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
      augue duis dolore te feugait nulla facilisi.
    </p>
  </div>
</div>
24
Jacob Ewing

Ce que vous devez faire est d'ajouter un wrapper en dehors de vos divs.

Voici le CSS: j'appelle ma classe 'main_body_container'

.main_body_container {
    min-width: 1005px; /* your desired width */
    max-width: 100%;
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
}

J'espère que ça aide :)

Mise à jour

Créé un stylo pour cela, voyez-le ici

13
edwardmagbago

Je ne sais pas trop si cela aiderait, mais vous pouvez essayer de changer le style des divs mentionnés à la place:

<div id="el1" style="position:fixed; left:-20px; top:0; background-color:yellow; z-index:-1">element</div>

<div id="el2" style="position:fixed; left:20px; top:0; background-color:yellow; z-index:-1">element</div>

En définissant la position comme fixe à la place, il "verrouille" les divs spécifiés en place tandis que le reste du contenu peut toujours défiler. Bien sûr, cela suppose que c'est dans le cas où le reste du contenu est empilé par le z-index pour être au-dessus des divs définis.

J'espère que cela t'aides.

4
vynx

Ajoutez ceci à votre CSS:

div {
overflow-x:hidden;
overflow-y:hidden;
}

Les styles overflow-x et -y ne sont pas reconnus par IE. Donc, si vous ne vous souciez que de Firefox 3, cela fonctionnera bien. Sinon, vous pouvez utiliser du javascript:

document.documentElement.style.overflow = 'hidden';  // firefox, chrome
document.body.scroll = "no";    // ie only
2
Peter Kazazes

J'ai pu résoudre ce problème en changeant l'attribut de position de l'élément en fixe:

position: fixe;

Plus de défilement horizontal provoqué par cet élément mais toujours de défilement horizontal provoqué par d'autres éléments.

1
Laurence Presland

Mettez le style suivant

html {overflow-x:hidden;}

Je l'ai testé sur IE 8, FF et Chrome.

1
sudip