Cómo obtener de forma confiable el ancho de la pantalla CON la barra de desplazamiento

Question

¿Hay alguna manera de indicar con fiabilidad el ancho de la ventana del navegador que incluye la barra de desplazamiento, pero no el resto de la ventana del navegador?

Ninguna de las propiedades que figuran here me dicen el ancho de la pantalla, incluyendo la barra de desplazamiento (si existe)

Answer 1

Mientras el cuerpo esté al 100%, document.body.scrollWidth funcionará.

Demostración: http://jsfiddle.net/ThinkingStiff/5j3bY/

HTML:

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

CSS:

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

div 
{ 
height: 1500px; 
} 

Guión:

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

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

puse un div de altura en la demo para forzar un desplazamiento bar.

Answer 2

Con jQuery se puede calcular el ancho de barra de desplazamiento del navegador por conseguir la diferencia de anchura cuando overflow: hidden se establece y overflow: scroll se establece . La diferencia de ancho será el tamaño de la barra de desplazamiento.

Aquí hay un simple example que muestra cómo se puede hacer esto.

Answer 3

Supongo que quiere saber el ancho de la ventana gráfica con la barra de desplazamiento incluida, porque la pantalla en sí misma no tiene una barra de desplazamiento. De hecho, el ancho y la altura de la pantalla serán la resolución de la pantalla de la computadora, por lo que no estoy seguro de lo que quiere decir con el ancho de la pantalla con la barra de desplazamiento.

Sin embargo, la ventana donde solo se presenta la página (y las barras de desplazamiento), es decir, sin menús del navegador, sin marcadores o lo que sea, solo la página representada, es donde puede estar presente dicha barra de desplazamiento.

Suponiendo que lo desee, puede medir el tamaño de la ventana del navegador del cliente teniendo en cuenta el tamaño de las barras de desplazamiento de esta manera.

Primero no olvide configurar su etiqueta de cuerpo para que sea del 100% de ancho y alto solo para asegurarse de que la medición sea precisa.

body { 
width: 100%; 
// if you wish to also measure the height don't forget to also set it to 100% just like this one. 
} 

A continuación puede medir el ancho a voluntad.

Muestra

// 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'); 

espero que ayude.

Answer 4

me di cuenta de cómo obtener con precisión la anchura de la ventana gráfica Con la barra de desplazamiento usando un código de: http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript

poner esto dentro de su $(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; 
}); 

lo que hace:

Cuando su página está 'lista' o cambia de tamaño, la función calcula la altura y el ancho correctos de la ventana (includ ing scrollbar).

Answer 5

Usted puede obtener el ancho de la ventana con la barra de desplazamiento, de esa manera:

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; 
     } 

Answer 6

Salida vw: http://dev.w3.org/csswg/css-values/#viewport-relative-lengths

body { 
    width: 100vw; 
} 

http://caniuse.com/#search=vw

Answer 7

Actualmente el nuevo vw y vh Las propiedades de css3 mostrarán el tamaño completo, incluida la barra de desplazamiento.

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

Hay una cierta discusión en línea si se trata de un error o no.

Answer 8

no hay nada después de barra de desplazamiento por lo que "resto de la ventana" es qué?

Pero sí, una forma de hacerlo es hacer otra envoltura div en el cuerpo donde todo va y el cuerpo tiene overflow:none; height:100%; width:100%;, envoltura div también tiene también un 100% de ancho y alto. y desbordamiento para desplazarse. TAN AHORA ... la anchura del envoltorio sería el ancho de la ventana gráfica

Ver Ejemplo: http://jsfiddle.net/techsin/8fvne9fz/

html,body { 
    height: 100%; 
    overflow: hidden; 
} 

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

Answer 9

Ésta es mi solución para la eliminación de la 'sombra barra de desplazamiento', porque no funcionó scrollWidth para mí:

canvas.width = element.offsetWidth; 
canvas.height = element.offsetHeight; 
canvas.width = element.offsetWidth; 
canvas.height = element.offsetHeight; 

Es fácil, pero funciona. Asegúrese de agregar un comentario que explique por qué asigna el mismo valor dos veces :)