Как надежно получить ширину экрана С помощью полосы прокрутки

Ответ 1

Пока тело 100%, document.body.scrollWidth будет работать.

Демо: 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;

Я положил высокий div в демо, чтобы заставить полосу прокрутки.

Ответ 2

Я выяснил, как точно получить ширину видового экрана с помощью полосы прокрутки с помощью некоторого кода из: http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript

Поместите это в свой $(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;  
});

Что он делает:

Когда ваша страница "готова" или изменяется, функция вычисляет правильную высоту и ширину окна (включая полосу прокрутки).

Ответ 3

Я предполагаю, что вы хотите знать ширину видового экрана с включенной полосой прокрутки, потому что на экране у него нет полосы прокрутки. Фактически ширина и высота экрана будут самим разрешением экрана компьютера, поэтому я не уверен, что вы имеете в виду с шириной экрана с полосой прокрутки.

Однако в области просмотра, где пользователю предоставляется только страница (и полосы прокрутки), а это означает, что никакие меню браузера, никакие закладки или что-то еще, только отображаемая страница, не может присутствовать в этой полосе прокрутки.

Предполагая, что вы этого хотите, вы можете измерить размер окна просмотра браузера клиента, учитывая таким образом размер полос прокрутки.

Во-первых, не забудьте установить тег тела на 100% ширину и высоту, чтобы убедиться, что измерение является точным.

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

Затем вы можете измерять ширину по желанию.

Пример

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

Надеюсь, что это поможет.

Ответ 4

В настоящее время новые свойства vw и vh css3 будут отображаться в полном размере, включая полосу прокрутки.

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

Существует некоторая дискуссия в Интернете, если это ошибка или нет.

Ответ 5

после полосы прокрутки ничего не происходит, поэтому "остальная часть окна" - это что?

Но да, один способ сделать это сделать другую оболочку div в теле, где все идет, а тело имеет overflow:none; height:100%; width:100%;, обертка div также имеет 100% ширину и высоту. и переполнение для прокрутки. SO NOW... шириной обертки будет ширина окна просмотра

См. пример: http://jsfiddle.net/techsin/8fvne9fz/

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

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

Ответ 6

С помощью jQuery вы можете рассчитать ширину полосы прокрутки браузера, получив разность ширины, когда overflow: hidden установлен, и overflow: scroll установлен. Разница в ширине будет размером полосы прокрутки.

Вот простой пример, который показывает, как вы могли это сделать.

Ответ 7

Вы можете получить ширину окна с полосой прокрутки таким образом:

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

Ответ 8

Посмотрите vw: http://dev.w3.org/csswg/css-values/#viewport-relative-lengths

body {
   width: 100vw;
}

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

Ответ 9

Это мое решение для удаления "тени прокрутки", потому что scrollWidth не работает для меня:

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

Это легко, но это работает. Обязательно добавьте комментарий, объясняющий, почему вы назначаете одно и то же значение дважды:)