Désactiver la barre de défilement horizontale à cause d'un DIV avec position:absolute qui se trouve en dehors de la page

Question

Désactiver la barre de défilement horizontale à cause d'un DIV avec position:absolute qui se trouve en dehors de la page

Demandé el 24 de Mai, 2011: Quand la question a-t-elle été
62563 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Ouvert: Situation réelle de la question

J'ai un élément positionné de manière absolue qui se trouve "à l'extérieur" de la page, mais je souhaite que les navigateurs (j'utilise Firefox 3) n'affichent pas de barres de défilement horizontales. Il semble que l'affichage d'une division positionnée à gauche (par exemple, avec "left : -20px") soit correct et qu'aucune barre de défilement ne soit affichée. Cependant, la même chose à droite ("right : -20px") affiche toujours la barre de défilement. Est-il possible de masquer la barre de défilement, tout en conservant la possibilité d'un défilement standard ? Je veux dire que je veux seulement désactiver le défilement dû à cet élément positionné de manière absolue, mais conserver le défilement dû aux autres éléments (je sais que je peux désactiver complètement les barres de défilement, mais 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>

Demandé el 24 de Mai, 2011 par Tom

Answer 1

5 Réponses

Answer 2

39voto

Vap0r Points 1143

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

Répondu el 24 de Mai, 2011 par Vap0r (1143 Points )

Answer 3

25voto

Jacob Ewing Points 366

Cela peut en fait être fait en utilisant directement le CSS sans avoir de restrictions sur la largeur de la page, etc. C'est possible :

Créez un div avec un débordement caché qui est absolument positionné dans le coin supérieur gauche de la page. Donnez-lui une largeur et une hauteur de 100 %.
Créez un autre div identique, mais sans débordement caché.
Ajoutez une classe pour les divs qui entourent le contenu de ceux qui ont été créés, en rendant sa position relative et en lui donnant la largeur que vous voulez donner au contenu de la page principale.
Ajoutez du contenu de cette classe dans chacun des divs que vous avez créés.

Le contenu de votre première division restera correctement aligné sur le contenu de votre seconde division, mais tout contenu dépassant le périmètre de la fenêtre sera tronqué.

Voici un exemple fonctionnel 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>

Répondu el 19 de Avril, 2012 par Jacob Ewing (366 Points )

Answer 4

13voto

edwardmagbago Points 91

Ce que vous devez faire, c'est 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 cela vous aidera :)

Mise à jour

Créé un stylo pour cela, voir aquí

Répondu el 24 de Novembre, 2011 par edwardmagbago (91 Points )

Answer 5

4voto

vynx Points 738

Je ne suis pas sûr que cela puisse vous aider, mais vous pouvez essayer de modifier le style des divs mentionnés en le remplaçant par ceci :

<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, on "verrouille" les divs spécifiés en place alors que le reste du contenu peut encore défiler. Bien sûr, cela suppose que le reste du contenu est empilé par l'indice z pour se trouver au-dessus des divisions définies.

J'espère que cela vous aidera.

Répondu el 12 de Juin, 2011 par vynx (738 Points )

Answer 6

2voto

Peter Kazazes Points 1591

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 n'êtes concerné que par Firefox 3, cela fonctionnera parfaitement. Sinon, vous pouvez utiliser du javascript :

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

Répondu el 12 de Juin, 2011 par Peter Kazazes (1591 Points )

Désactiver la barre de défilement horizontale à cause d'un DIV avec position:absolute qui se trouve en dehors de la page

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Désactiver la barre de défilement horizontale à cause d'un DIV avec position:absolute qui se trouve en dehors de la page

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: