Prévenir 100vw de la création de défilement horizontale

Si un élément est défini à width: 100vw; et il y a une barre de défilement verticale de la largeur de l'élément sera égal à la fenêtre d'affichage, plus la largeur de la barre de défilement.

Est-il possible de faire pour éviter cela?

Est-il possible d'éviter ce sans désactiver le défilement horizontal sur toute la page? Mis à part de changer mon css/balisage de faire de l'élément 100% de la largeur du corps je ne peux pas penser à quelque chose.

Testé en Version Chrome 43.0.2357.81 m & FF 36.0.1 & Opéra 20.0.1387.91 sur Windows 8.1

Voici le code demandé:

Exemple

html

<div class="parent">
    <div class="box"></div>
</div>
<div class="tall"></div>

css

body { margin: 0; }
html { box-sizing: border-box; }
*, *::before, *::after {
    box-sizing: inherit;
    position: relative;
}
.parent {
    background: rgba(0, 0, 0, .4);
    height: 100px;
    width: 5rem;
    margin-bottom: 25px;
}

.box {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .4);
    height: 50px;
    width: 100vw;
}

.tall {
    height: 100rem;
}

Il pourrait y avoir de nombreuses raisons pour cela. Poster votre code.
peut-être mettre les marges à 0 ?
Vous avez essayé overflow: hidden?

InformationsquelleAutor Hal Carleton | 2015-05-27

27

Fondamentalement, la réponse est non, si vous avez une barre de défilement verticale il n'y a aucun moyen de faire 100vw égale à la largeur de la fenêtre d'affichage visible. Voici les solutions que j'ai trouvé pour ce problème.

avertissement: je n'ai pas testé ces solutions pour la prise en charge du navigateur

tl;dr

Si vous avez besoin d'un élément à 100% de la largeur de la fenêtre d'affichage visible(viewport moins la barre de défilement), vous aurez besoin de le mettre à 100% du corps. Vous ne pouvez pas le faire avec vw parts si il y a une barre de défilement verticale.

1. Définir tous les éléments ancêtres à la position statique de la

Si vous vous assurez que tous .box's ancêtres sont mis à position: static; puis définissez .box à width: 100%; de sorte qu'il sera de 100% du corps de la largeur. Ce n'est pas toujours possible. Parfois, vous avez besoin de l'un des ancêtres à position: absolute; ou position: relative;.

Exemple

2. Déplacer l'élément en dehors de la non-statique ancêtres

Si vous ne pouvez pas définir l'ancêtre des éléments de position: static; vous aurez besoin de déplacer .box en dehors d'eux. Cela vous permettra de définir l'élément à 100% de la largeur du corps.

Exemple

3. Supprimer La Barre De Défilement Verticale

Si vous n'avez pas besoin de défilement verticale, vous pouvez simplement supprimer la barre de défilement verticale par le réglage de la <html> élément de overflow-y: hidden;.

Exemple

4. Supprimer La Barre De Défilement Horizontal
Cela ne résout pas le problème, mais peut être adapté à certaines situations.

Réglage de la <html> élément de overflow-y: scroll; overflow-x: hidden; permettra d'éviter la barre de défilement horizontale à partir d'apparaître, mais la 100vw élément ne permet encore de débordement.

Exemple

Viewport Pourcentage Des Longueurs Spec

De la fenêtre d'affichage de pourcentage de la longueur par rapport à la taille de l'
initial contient un bloc. Lorsque la hauteur ou la largeur de la première
contenant bloc est modifié, ils sont mis à l'échelle en conséquence. Cependant,
lorsque la valeur de débordement sur l'élément racine est automatique, tout de défilement
les bars sont censés ne pas exister. Veuillez noter que la première contenant
la taille du bloc est affecté par la présence de barres de défilement sur le
fenêtre d'affichage.

Il semble qu'il y a un bug parce que vw parts ne devraient inclure la largeur de la barre de défilement lorsque le dépassement est réglé sur auto sur l'élément racine. Mais j'ai essayé de réglage de l'élément racine overflow: scroll; et il n'a pas changé.

Exemple

InformationsquelleAutor Hal Carleton
6

Je sais que c'est une vieille question, mais le bug existe toujours dans les navigateurs modernes. Je n'aimais pas l'idée de faire overflow-x: hidden c'est donc ce que j'ai fait. Un exemple complet est disponible ici: http://codepen.io/bassplayer7/pen/egZKpm

Mon approche a été de déterminer la largeur de la barre de défilement et de l'utilisation calc() pour réduire la 100vw par le montant de la barre de défilement. C'est un peu plus compliqué parce que dans mon cas, je tirais la largeur du contenu d'une boîte qui avait défini avec j'ai donc besoin de déclarer la marge.

Quelques remarques sur le code ci-dessous: tout d'abord, j'ai remarqué que 20px semble être une assez large nombre magique pour les barres de défilement. J'utilise un SCSS variable (il n'a pas à être SCSS) et du code en dehors de @supports comme une solution de repli.

Aussi, ce n'est pas garantie qu'il n'y aura jamais de barres de défilement. Puisqu'il nécessite l'activation de Javascript, les utilisateurs qui n'ont pas de qui pourront afficher les barres de défilement horizontale. Vous pourriez contourner que par la mise en overflow-x: hidden et à l'ajout d'une classe pour le remplacer lorsque le Javascript s'exécute.

Code Complet:
```
$scroll-bar: 20px;

:root {
    --scroll-bar: 8px;
}

.screen-width {
  width: 100vw;
  margin: 0 calc(-50vw + 50%);

    .has-scrollbar & {
        width: calc(100vw - #{$scroll-bar});
        margin: 0 calc(-50vw + 50% + #{$scroll-bar /2});
    }

    @supports (color: var(--scroll-bar)) {
        .has-scrollbar & {
            width: calc(100vw - var(--scroll-bar));
            margin: 0 calc(-50vw + 50% + (var(--scroll-bar) / 2));
        }
    }
}
```
Puis ce Javascript va définir le CSS Personnalisé Propriété:
```
function handleWindow() {
    var body = document.querySelector('body');

    if (window.innerWidth > body.clientWidth + 5) {
        body.classList.add('has-scrollbar');
        body.setAttribute('style', '--scroll-bar: ' + (window.innerWidth - body.clientWidth) + 'px');
    } else {
        body.classList.remove('has-scrollbar');
    }
}

handleWindow();
```
Comme une note de côté, les utilisateurs de Mac pouvez tester cela en allant dans les Préférences Système -> Général> Afficher les Barres de Défilement = Toujours

InformationsquelleAutor bassplayer7
2

Les rembourrages et les frontières peuvent interférer. Donc peut de marge. Utilisation box-sizing pour calculer la largeur, y compris ces attributs. Et peut-être retirer de la marge (le cas échéant) à partir de la largeur.
```
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    margin: 0; /* interferes with 100vw */
}
.parent {
    width: 100vw;
    max-width: 100%; /* see below */
}
.box {
    width: 100%; /* For those good old-fashioned browsers with no vw or calc() support */
    width: -webkit-calc(100vw - [your horizontal margin, if any]);
    width: -moz-calc(100vw - [your horizontal margin, if any]);
    width: calc(100vw - [your horizontal margin, if any]);
    max-width: 100%
}
```
Il semble que vous avez à ajouter max-width: 100%; si il y a une redistribution qui est à l'origine de la barre de défilement apparaissent après la première fenêtre d'affichage le calcul de la largeur. Cela ne semble pas se produire dans les navigateurs sans interférer barre de défilement (iOS, OS X, c'est à dire 11 de Métro), mais peut affecter tous les autres navigateurs.
- Si vous allez utiliser des préfixes pour box-sizing, vous aurez certainement besoin de quelques pour calc en tant que bien.
- absolument. -moz-calc() et -webkit-calc() sont disponibles.
- (Je vous conseille de les ajouter à votre exemple. ;-))
- Si vous insistez. 🙂
- Je ne comprends pas comment cela résout le problème. Je veux l'élément à l'égalité des 100vw moins la largeur de la barre de défilement, pas 100vw moins c'est parent de marges. Dites-vous que vw ajoute des marges de il est calcul? Parce que ce n'est pas droit.
- 100w doivent être conscients de la barre de défilement et d'utiliser uniquement la réelle fenêtre d'affichage de la largeur (d'où son nom), voir: w3.org/TR/css-values/#vw-unit "veuillez Noter que la première contenant la taille du bloc est affecté par la présence de barres de défilement sur la fenêtre d'affichage."
- C'est le comportement que j'attendais, mais ce n'est pas ce qui se passe. Je vais essayer de mettre ensemble un exemple.
- Je crois que @redelschaap peut-être votre réponse à cette partie de votre question déjà. Votre .parent { width: 30rem; } ou la body's de la marge dirait qu'il pourrait être le coupable ici.
- Ni sont la cause de cette. Découvrez le jsfiddle j'ai juste ajouté.
- J'ai une solution de travail basé sur votre violon: jsfiddle.net/1jh1cybc/4 je vais mettre à jour ma réponse.
- Hmmm, mais avec un max-width de 100% vous êtes simplement en remplaçant la largeur de vw. Ainsi, vous pouvez simplement modifier la largeur à 100% à la place. Je veux la largeur pour être réellement 100vw(le parent n'est pas impérativement à 100% de la fenêtre d'affichage. J'ai changé le jsfiddle pour montrer le problème avec un parent qui n'est pas à 100% de largeur.
- Je vous suggère de l'essayer avant de le frapper 🙂 jsfiddle.net/1jh1cybc/6
- Droit, mais c'est en supposant que tous les ancêtres sont en position statique. Dans mon exemple, le parent qui a été mis à par rapport. Je me demandait si il existe un moyen autre que le réglage de tous les ancêtres de la statique ou de la modification de la balise.
- Donc je suppose que la réponse est non, ceux sont les seules options?
- Vous ne pouvez pas supprimer position: relative; de .parent? Est quelque chose qui vous empêchera d'utiliser position: fixed; sur .box?
- Je peux mettre tous les ancêtres de position: static, cela signifie simplement beaucoup plus de travail tout à la mise en page correctement, et, éventuellement, d'avoir à changer les balises. Qui est ce qui a incité la question. Non, .box ne peut être fixé.
- Plus ou moins. Le reste du problème, c'est que vw est calculée une fois mais pas re-calculée une fois les barres de défilement apparaissent. Selon l'w3.org lien déjà posté cette re-calcul de passe "Toutefois, lorsque la valeur de "débordement" sur l'élément racine est "auto", les barres de défilement sont censés ne pas exister.". C', l'OMI est l'une des faiblesses avec l' vw unité, il devrait être re-calculé (mais je suppose que il y a une bonne raison pour qu'il fonctionne de la manière qu'il le fait). Mayhaps cela peut aider stackoverflow.com/questions/986937/...?
- -moz-box-sizing et -moz-calc est inutile; Firefox abandonné le préfixe il y a longtemps. Barre de défilement est toujours 17px large/haut à travers tous les navigateurs de bureau, si l'on est présent.
- D'abord, les barres de défilement ne sont pas toujours 17px, bureau de Safari, par exemple, sont de 15 points (developer.apple.com/library/mac/documentation/UserExperience/...). Ensuite, nous avons l'expérience >1,5% de visiteurs avec FF <30 qui exige -moz - préfixes de ne pas rompre totalement mise en page. YMMV bien sûr, mais pas tout le monde peut déposer les préfixes encore. Troisièmement, quelqu'un avec de l'INTERFACE utilisateur de mise à l'Échelle activé dans leur système d'exploitation pourrait changer la barre de défilement largeur/hauteur). En conclusion, nous ferions mieux de ne pas assumer sa largeur.
InformationsquelleAutor Niklas Brunberg
1

J'ai aussi été aux prises avec cela, et j'ai aussi pensé à CSS variables comme la solution. CSS variables ne sont pas prises en charge dans IE11 bien donc j'ai essayé autre chose:

Je l'ai fixée par le calcul de la largeur de la barre de défilement: soustraction de la largeur de la body (pas y compris la barre de défilement) à partir de la largeur de la window (y compris la barre de défilement). Je l'utilise pour l'ajouter à l'100% du corps, voir plusScrollBar variable.

JS:
```
    //calculate width of scrollbar and add it as inline-style to the body
var checkScrollBars = function() {
    var b = $('body');
    var normalw = 0;
    var scrollw = 0;
    normalw = window.innerWidth;
    scrollw = normalw - b.width();

    var plusScrollBar = 'calc(' + '100% + ' + scrollw + 'px)'
    document.querySelector('body').style.minWidth = plusScrollBar;
}();
```
CSS:
```
html{
    overflow-x: hidden;
}
```
Pourquoi je l'aime: il prend en considération que toutes les barres de défilement sont de la même largeur ou considérée comme conservée de l'espace à tous. 🙂
- FYI - ce ce besoin d'un redimensionner/anti-rebond sur elle sinon votre corps devient une largeur fixe qui est exposée sur le redimensionnement/dispositif de rotation.
- 100% est fluide 😉
InformationsquelleAutor Cyd
0

Voici ma solution pour le problème de 100vw l'ajout d'une barre de défilement horizontale:
```
html {
width: calc(100% + calc(100vw - 100%));
overflow-x: hidden;
}

.box {
width: calc(100% + calc(100vw - 100%));
}
```
- Il y a beaucoup de inutile d'encombrer votre réponse. Voici une version plus simple qui fonctionne tout aussi bien: html{overflow-x:hidden;}
- Votre réponse n'est pas de contribuer à l'OP de la question. Je vous recommande de le lire de nouveau.
- Je vous recommandons de vérifier votre réponse. Il n'y a littéralement pas de différence fonctionnelle entre ce que vous avez écrit dans votre réponse, et html{width:100%;overflow-x:hidden;} .box{width:100vw;}, à l'exception d'un lot de inutile de mathématiques qui ne fait rien.
- {width: 100%} et {width: 100vw} ne sont pas les mêmes. Peut-être que c'est là que votre incompréhension vient de.
- 100% et 100vw sont les mêmes quand ils sont mis sur le <html> élément. Je crains que je ne suis pas de malentendu quoi que ce soit, votre réponse est juste ridiculement trop compliqué. Désolé, @moy2010.
- 100% + (100vw - 100%) = 100% + 100vw - 100% = 100vw. Les mathématiques ne rien en dehors de dissimuler le fait que cette réponse fonctionne parce que vous avez overflow-x sur le corps.
InformationsquelleAutor moy2010
-2

Un élément avec width: 100vw seules causes des barres de défilement horizontale lorsque l'un des parents a un remplissage horizontal. Sinon il doit s'intègrent bien.

Vérifier ce violon: http://jsfiddle.net/1jh1cybc/ La .parent2 a une marge, ce qui provoque l'intérieur .box de sortir de c'est parent de largeur.

Edit:

Dans votre cas, je suppose que votre body a une marge. Vérifiez ce violon avec votre code et essayer de l'enlever le corps de la règle css: http://jsfiddle.net/1jh1cybc/1/
- Mon corps n'a plus de marge. Découvrez le jsfiddle j'ai juste ajouté à la question. C'est une forme modifiée de la vôtre.
- Votre deuxième exemple n'a pas de barre de défilement verticale, donc il n'est pas horizontale de débordement.
- J'ai ajusté mon deuxième exemple, en donnant la boîte de 1000px de la hauteur, toujours pas de barre de défilement horizontale: jsfiddle.net/1jh1cybc/3
- J'ai regardé dans votre violon, mais je n'ai pas de barre de défilement horizontale, seulement une verticale... dl.dropboxusercontent.com/u/9719519/2015-05-27/Fiddle.jpg
- Ce navigateur/système d'exploitation utilisez-vous? Je ne reconnais pas la barre de défilement à tous.
- J'utilise Chrome 43.0.2357 sur Windows 7
- Hmmm, ainsi que dans votre cas, la vw est en fait le même, mais parce que votre barre de défilement est superposé sur la page, contrairement à la norme de "solide", les barres de défilement, il ne provoque pas le même problème. La spec ne dit que vw est calculée avec l'hypothèse qu'il n'y a pas de barres de défilement si le dépassement est réglé sur auto.
- Mais les navigateurs calculer la taille de la fenêtre sans barre de défilement de la taille de ils sont solides (pas de semi-transparent). Ou, au moins, ils devraient, peut-être que c'est un bug dans les versions spécifiques?
- Lorsque le navigateur calcule vw parts "les barres de défilement sont censés ne pas exister". Donc 100vw est de 100% de la vue visible, plus la largeur de la barre de défilement. La spec dit qu'il devrait le faire "lorsque la valeur de débordement sur l'élément racine est automatique", mais j'ai essayé de réglage html { overflow: scroll; } et ça ne change rien.
InformationsquelleAutor redelschaap
-2

Voici ce que je fais:
```
div.screenwidth{
    width:100%;  /* fallback for browsers that don't understand vw or calc */
    width: calc(100vw - 17px); /* -17 because vw is calculated without the scrollbar being considered & 17px is width of scrollbars */
    position:relative;  /* use this if the parent div isn't flush left */
    right: calc((100vw - 17px - 100% )/2);
```
}
- Ce sur les appareils où il n'y a pas de barre de défilement? L'élément sera à la fin 17px court. Aussi 17px n'est pas un universel de la largeur de toutes les barres de défilement. Je viens de vérifier dans ma version actuelle de chrome et de la barre de défilement a été 15px.
- Oui, c'est 17px court, mais le positionnement des centres d'elle et j'ai personnellement (car il n'y a pas de solution réelle) préfèrent vivre avec la 8px écart sur un côté plutôt que d'avoir la barre de défilement horizontale.
InformationsquelleAutor innocuous_name
-2

Je fixe sur mon site en ajoutant des body{overflow-x:hidden} à la page en question.

Fonctionne sur votre exemple.
- Je me suis adressée à ma réponse. Ce n'est pas une solution, mais il peut être approprié dans certaines situations où vous n'avez pas peur de perdre une partie de votre élément, car le 100vw élément ne permet encore de débordement. lecture #4 de ma réponse
InformationsquelleAutor Adam
-2

Bien. Je sais je suis en retard.

Mais voici la Solution que j'utilise sur toutes mes pages où j'ai besoin de 100vw:
Ne pas afficher les Barres de défilement verticales.

De retirer les barres de défilement ressemble de manière à mieux de toute façon. Au moins à mon Avis.

Voici ce que vous devez faire:
```
::-webkit-scrollbar {
  width: 0px;
}
```
Voila

InformationsquelleAutor jam0

Vous devez vous connecter pour publier un commentaire.