web-dev-qa-db-fra.com

La barre de défilement des navigateurs est sous mon div fixe

j'ai un en-tête fixe avec 100% de largeur.

#header {
background: #2e2e2e;
width: 100%;
z-index: 999;
position: fixed;
}

la barre de défilement des navigateurs est sous mon div fixe. Comment résoudre ce problème?

scrollbar

csscss-position
39
LifeIsShort

son parce que le overflow-x: hidden; dans le numéro de ligne base.css 9 

body {
    color: #444444;
    font: 13px/20px Arial,Helvetica,sans-serif;
    overflow-x: hidden; // remove this 
}
35
NullPoiиteя

Cela peut être résolu en ajoutant un débordement de corps

de

overflow:auto;

à

overflow:auto;
overflow:initial;

C'est ton problème

Si votre défilement est défini sur corps, s'il est structuré de la manière suivante: body> wrapper> header (avec position fixe), le contenu, etc.

ci-dessous est votre solution

solution au problème

note: cela fonctionnera uniquement sur body mais pas sur un conteneur div avec scroll. vous pouvez également travailler avec z-index pour le faire fonctionner, mais vous spécifierez z-index pour empiler d'autres éléments afin de bien le faire.

J'espère que cela t'aides..:)

9
mike tracker

Le problème n'est pas avec overflow-x sur la balise body. C'est à cause de overflow-x etoverflow-y sur la balisehtml. Une fois que j'ai supprimé cela de la balise HTML, je pouvais mettre le débordement que je voulais sur mon corps. 

Cela se produit lorsque:

  • overflow-x est défini sur auto, hidden, overflow ou scroll
  • overflow-y est défini sur auto, hidden, -webkit-paged-x ou -webkit-paged-y

Il n'est pas nécessaire que ce soit un appel explicite à overflow-x ou overflow-y, car overflow les définit tous les deux.

Je suis sur Chrome 67 sous Windows 10.

3
NonameSL

Un hack de CSS (j'ai finalement trouvé un moyen) pour cela avec peu d'explications rapides - le premier élément flottant est . Je pense comprendre le principe de la façon dont cela fonctionne à partir du code ci-dessous.

Mise à jour: Et il existe un problème pour les navigateurs mobiles (voir ci-dessous) pour déterminer si vous êtes d'accord ou non. 

<div style="position: fixed;top: 0;width: 100%;left: 0;z-index: 100000;height: 200px;background: #f00;">

<div id="aaaaa" style="display: block;float:right;color: #000;overflow-y:scroll;min-height:20px;top: -100px;background: #0f0;border: 1px solid #0f0;"></div>
<div id="bbbb" style="display: block;position:relative;color: #000;overflow:hidden;min-height:20px;background: #f0f;border: 1px solid #00f;">sdfasdf sdfas s as as fasd fasd fasdfasd fasd asdf asd fasdf sadf asdf asdf asdf sad fasdf asdf asdf asd fasdf asdf asdf asd fsad sad sfd

        <div style="width: 100%;height: 20px;background: #5ff"></div>

</div>

Et le code final, presque identique avec les choses que vous voulez voir et fonctionner 

<div style="position: fixed;top: 0;width: 100%;left: 0;z-index: 100000;height: 0px;overflow:visible;background: #f00;">

<div id="aaaaa" style="display: block;float:right;color: #000;overflow-y:scroll;visibility:hidden;min-height:20px;top: -100px;background: #0f0;border: 1px solid #0f0;"></div>
<div id="bbbb" style="display: block;position:relative;color: #000;overflow:hidden;min-height:20px;background: #f0f;border: 1px solid #00f;">sdfasdf sdfas s as as fasd fasd fasdfasd fasd asdf asd fasdf sadf asdf asdf asdf sad fasdf asdf asdf asd fasdf asdf asdf asd fsad sad sfd

        <div style="width: 100%;height: 20px;background: #5ff"></div>

</div>

Ce qui est important, c’est que cela fonctionne avec les navigateurs mobiles et de bureau. En fait, pour le moment, j'ai testé le mobile sous Windows Edge lorsque mon ordinateur est passé en mode tablette, puis en mode bureau. Le code fonctionne alors tout le temps . Vérifier si cela fonctionne ou non avec: before au lieu de div id = "aaaa" pour le rendre plus css pur et des divs supplémentaires intégrés.

Mise à jour: cela ne fonctionne pas bien auparavant car le navigateur Edge ne modifie pas la barre de défilement lors de l’entrée en mode tablette.

Si vous rencontrez des problèmes de contenu caché dans l'élément bbbb, essayez de ne pas positionner: les éléments absolus/fixes dans le conteneur bbbb.

Je ne l'ai pas encore testé pour toutes les situations et tous les navigateurs.

Mise à jour: le problème mentionné quelque part en haut de cette réponse - pourtant, la barre de défilement est couverte parce que la barre de défilement est dynamique - elle apparaît uniquement lorsque vous faites défiler l'écran et que vous savez qu'elle ne fait partie d'aucun conteneur. La barre de défilement est probablement assez mince sur tous les navigateurs, vous devez donc décider quoi faire avec. Peut-être une petite marge de 5 pixels ou plus?

2
OpenEX

J'ai eu ce problème, ma barre de défilement était sous mon en-tête fixe et je l'ai résolu après avoir supprimé de ma balise html height: 100%; et ajouté d'autres propriétés pour être sûr d'obtenir le même résultat. Aucune des autres solutions ne m'a aidé. J'espère que ça aidera quelqu'un.

1
Madalina Taina

Avait le même problème dans réagir application.

Style overflow-y: scroll déplacé de #root au sélecteur body. Cela a résolu le problème pour moi.

0
Nikita