Comment obtenir de manière fiable la largeur de l'écran AVEC la barre de défilement

Est-il un moyen fiable pour dire un navigateur de la fenêtre d'affichage de la largeur qui comprend la barre de défilement, mais pas le reste de la fenêtre du navigateur)?

Aucune des caractéristiques énumérées ici me dire la largeur de l'écran, y COMPRIS la barre de défilement (si présent)

source d'informationauteur Goro

Tant que corps est de 100%, document.body.scrollWidth fonctionne.

Démo: http://jsfiddle.net/ThinkingStiff/5j3bY/

HTML:

<div id="widths"></div>

CSS:

body, html
{
margin: 0;
padding: 0;
width: 100%;
}

div
{
height: 1500px;
}

Script:

var widths = 'viewport width (body.scrollWidth): ' 
    + document.body.scrollWidth + '<br />'
    + 'window.innerWidth: ' + window.innerWidth + '<br />';

document.getElementById( 'widths' ).innerHTML = widths;

J'ai mis un haut div dans la démonstration de force d'une barre de défilement.

J'ai compris comment faire pour obtenir avec précision la fenêtre d'affichage de la largeur de la barre de défilement à l'aide du code à partir de: http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript

Mettre cela à l'intérieur de votre $(document).ready(function()

$(document).ready(function(){
    $(window).on("resize", function(){
      function viewport() {
          var e = window, a = 'inner';
          if (!('innerWidth' in window )) {
              a = 'client';
              e = document.documentElement || document.body;
          }
          return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
      }
    });
    //Get the correct window sizes with these declarations
    windowHeight = viewport().height;
    windowWidth = viewport().width;  
});

Ce qu'il Fait:

Lorsque votre page est "prêt" ou est redimensionné, la fonction calcule la bonne fenêtre de la hauteur et de la largeur (y compris la barre de défilement).

6

Je suppose que vous voulez savoir de la fenêtre d'affichage de la largeur avec la barre de défilement en compte, parce que l'écran lui-même n'ont pas de barre de défilement. En fait, la largeur de l'Écran et la hauteur sera la résolution de l'écran lui-même, donc je ne suis pas sûr de ce que tu veux dire avec la largeur de l'écran avec la barre de défilement.

De la fenêtre d'affichage toutefois, la zone où seule la page (et les barres de défilement) est présenté à l'utilisateur, de sens, pas de menus du navigateur, pas de signets ou que ce soit, seule la page affichée, est l'endroit où une telle barre de défilement peuvent être présents.

En supposant que vous voulez, vous pouvez mesurer la taille de la fenêtre du navigateur client tout en tenant compte de la taille des barres de défilement de cette façon.

D'abord, n'oubliez pas de vous balise body à 100% de la largeur et de la hauteur juste pour s'assurer que la mesure est précise.
```
body { 
width: 100%; 
//if you wish to also measure the height don't forget to also set it to 100% just like this one.
}
```
Par la suite, vous pouvez mesurer la largeur à volonté.

Échantillon
```
//First you forcibly request the scroll bars to be shown regardless if you they will be needed or not.
$('body').css('overflow', 'scroll');

//Viewport width with scroll bar.
var widthWithScrollBars = $(window).width();

//Now if you wish to know how many pixels the scroll bar actually has
//Set the overflow css property to forcibly hide the scroll bar.
$('body').css('overflow', 'hidden');

//Viewport width without scroll bar.
var widthNoScrollBars = $(window).width();

//Scroll bar size for this particular client browser
var scrollbarWidth = widthWithScrollBars - widthNoScrollBars;

//Set the overflow css property back to whatever value it had before running this code. (default is auto)
$('body').css('overflow', 'auto');
```
Espère que cela aide.
1

Actuellement la nouvelle vw et vh propriétés css3 pleinement la taille, y compris la barre de défilement.

body { width:100vw; height:100vh; }

Il y a une discussion en ligne si c'est un bug ou pas.
1

il n'y a rien après barre de défilement alors "reste" de la fenêtre", c'est quoi?

Mais oui, une façon de le faire est de faire une autre div wrapper dans le corps où tout va et le corps a overflow:none; height:100%; width:100%; sur elle, div wrapper aussi a 100% de la largeur et de la hauteur. et le débordement de défilement. ALORS MAINTENANT...la largeur de wrapper serait la largeur de la fenêtre d'affichage

Voir L'Exemple: http://jsfiddle.net/techsin/8fvne9fz/
```
html,body {
    height: 100%;
    overflow: hidden;
}

.wrapper {
    width: 100%;
    height: 100%;
    overflow: auto;
}
```
0

Avec jQuery, vous pouvez calculer le navigateur de la barre de défilement de la largeur de la différence de largeur lorsque overflow: hidden est définie et overflow: scroll est réglé.
La différence de largeur a la taille de la barre de défilement.

Ici est un exemple simple qui montre comment vous pouvez faire cela.

Vous pouvez obtenir la largeur de la fenêtre avec la barre de défilement , de cette façon:

function scrollbar_width() {
          if (jQuery('body').height() > jQuery(window).height()) {

              /* Modified from: http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php */
              var calculation_content = jQuery('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>');
              jQuery('body').append(calculation_content);
              var width_one = jQuery('div', calculation_content).innerWidth();
              calculation_content.css('overflow-y', 'scroll');
              var width_two = jQuery('div', calculation_content).innerWidth();
              jQuery(calculation_content).remove();
              return (width_one - width_two);
          }
          return 0;
      }

0

Découvrez vw: http://dev.w3.org/csswg/css-values/#viewport-relative-lengths
```
body {
   width: 100vw;
}
```
http://caniuse.com/#search=vw
0

C'est ma solution pour le retrait de la barre de défilement de l'ombre", car scrollWidth ne fonctionne pas pour moi:
```
canvas.width  = element.offsetWidth;
canvas.height = element.offsetHeight;
canvas.width  = element.offsetWidth;
canvas.height = element.offsetHeight;
```
C'est facile, mais il fonctionne. Assurez-vous d'ajouter un commentaire expliquant pourquoi vous attribuer la même valeur à deux reprises 🙂

Vous devez vous connecter pour publier un commentaire.