Est-il possible de calculer la largeur du Viewport (vw) sans scrollbar?

une façon de faire ceci est avec calc. Pour autant que je sache, 100% est la largeur y compris les barres de défilement. Donc, si vous n':

body {
  width: calc(100vw - (100vw - 100%));
}

vous obtenez le 100vw moins la largeur de la barre de défilement.

vous pouvez le faire avec la hauteur aussi, si vous voulez un carré qui est de 50% du viewport par exemple (moins 50% de la largeur du scollbar)

.box {
  width: calc(50vw - ((100vw - 100%)/2))
  height: 0
  padding-bottom: calc(50vw - ((100vw - 100%)/2))
}  

vw unité ne prend pas en l' overflow-y scrollbar en compte quand overflow-y est réglé sur auto.

Modifier overflow-y: scroll; et vw l'unité sera le viewport sans la barre de défilement.

Seul inconvénient à prendre en compte. Si le contenu s'adapte à l'écran, la barre de défilement est affichée de toute façon. La solution Possible est de passer de autoscroll en javascript.

Selon spécifications, les unités de longueur relative de viewport ne tiennent pas compte des barres de défilement (et, en fait, supposent qu'elles n'existent pas).

donc quel que soit votre comportement prévu, vous ne pouvez pas prendre en compte scrollbars lors de l'utilisation de ces unités.

les navigateurs Webkit excluent les barres de défilement, d'autres les incluent dans la largeur retournée. Cela peut bien sûr conduire à des problèmes: par exemple, si vous avez un contenu généré dinamically avec ajax qui ajoute de la hauteur dinammically, Safari pourrait passer d'une mise en page à une autre lors de la visualisation de la page... Ok, ça n'arrive pas souvent, mais c'est quelque chose à connaître. Sur mobile, moins de problèmes, provoquer des barres de défilement ne sont généralement pas montrés.

Cela dit, si votre problème est de calculer exactement la fenêtre d'affichage de la largeur sans les barres de défilement dans tous les navigateurs, pour autant que je sais, une bonne méthode est ceci:

   width = $('body').innerWidth();

ayant précédemment défini:

body {
    margin:0;
  }