javascript 如何使用滚动条可靠地获取屏幕宽度

How to reliably get screen width WITH the scrollbar

提问by Goro

Is there a way to reliably tell a browser's viewport width that includes the scrollbar, but not the rest of browser window)?

有没有办法可靠地告诉浏览器的视口宽度，包括滚动条，而不是浏览器窗口的其余部分）？

None of the properties listed heretell me the width of the screen INCLUDING the scrollbar (if present)

此处列出的所有属性都没有告诉我屏幕的宽度，包括滚动条（如果存在）

采纳答案by ThinkingStiff

As long as body is 100%, document.body.scrollWidthwill work.

只要身体是100％，document.body.scrollWidth就会工作。

Demo: http://jsfiddle.net/ThinkingStiff/5j3bY/

演示：http: //jsfiddle.net/ThinkingStiff/5j3bY/

HTML:

HTML：

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

CSS:

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;

I put a tall div in the demo to force a scroll bar.

我在演示中放了一个高 div 来强制滚动条。

回答by Joshua Plicque

I figured out how to accurately get the viewport width WITH the scrollbar using some code from: http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript

我想出了如何使用以下代码通过滚动条准确获取视口宽度：http: //andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript

Put this inside your $(document).ready(function()

把这个放在你的 $(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;  
});

What it Does:

它能做什么：

When your page is 'ready' or is resized, the function calculates the correct window height and width (including scrollbar).

当您的页面“准备好”或调整大小时，该函数会计算正确的窗口高度和宽度（包括滚动条）。

回答by Fábio Antunes

I assume you want to know the viewport width with scrollbar included, because the screen it self does not have a scrollbar. In fact the Screen width and heigth will be the computer screen resolution itself, so I'm not sure what you mean with screen width with the scroll bar.

我假设您想知道包含滚动条的视口宽度，因为它本身的屏幕没有滚动条。事实上，屏幕宽度和高度将是计算机屏幕分辨率本身，所以我不确定你对带有滚动条的屏幕宽度的意思。

The viewport however, the area where only the page (and scroll bars) is presented to the user, meaning, no browser menus, no bookmarks or whatever, only the page rendered, is where such scroll bar may be present.

然而，视口，即只有页面（和滚动条）呈现给用户的区域，意味着没有浏览器菜单、没有书签或其他任何东西，只有呈现的页面，是这种滚动条可能存在的地方。

Assuming you want that, you can measure the client browser viewport size while taking into account the size of the scroll bars this way.

假设您需要这样做，您可以测量客户端浏览器视口大小，同时以这种方式考虑滚动条的大小。

First don't forget to set you body tag to be 100% width and height just to make sure the measurement is accurate.

首先不要忘记将身体标签设置为 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.
}

Afterwards you can measure the width at will.

之后您可以随意测量宽度。

Sample

样本

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

Hope it helps.

希望能帮助到你。

回答by Persijn

Currently the new vwand vhcss3 properties will show full size including scrollbar.

目前，新的vw和vhcss3 属性将显示全尺寸，包括滚动条。

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

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

There is some discussion online if this is a bug or not.

如果这是一个错误，网上有一些讨论。

回答by Muhammad Umer

there is nothing after scrollbarso "rest of the window" is what?

滚动条之后什么都没有，所以“窗口的其余部分”是什么？

But yes one way to do it is make another wrapper div in body where everything goes and body has overflow:none; height:100%; width:100%;on it, wrapper div also also has 100% width and height. and overflow to scroll. SO NOW...the width of wrapper would be the width of viewport

但是，是的，一种方法是在 body 中制作另一个包装 div，所有内容都在其中，并且 bodyoverflow:none; height:100%; width:100%;上有，包装 div 也有 100% 的宽度和高度。并溢出滚动。所以现在......包装器的宽度将是视口的宽度

See Example: http://jsfiddle.net/techsin/8fvne9fz/

参见示例：http: //jsfiddle.net/techsin/8fvne9fz/

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

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

回答by yyny

This is my solution for removing the 'scrollbar shadow', because scrollWidthdidn't work for me:

这是我删除“滚动条阴影”的解决方案，因为scrollWidth对我不起作用：

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

It's easy, but it works. Make sure to add a comment explaining why you assign the same value twice :)

这很容易，但它有效。确保添加注释解释为什么您分配相同的值两次:)

回答by fpauer

You can get the window width with scrollbar , that way:

您可以使用 scrollbar 获取窗口宽度，这样：

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

回答by lax4mike

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

查看大众：http: //dev.w3.org/csswg/css-values/#viewport-relative-lengths

body {
   width: 100vw;
}

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

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

回答by Fabian Leutgeb

With jQuery you can calculate the browser's scrollbar width by getting the width difference when overflow: hiddenis set and overflow: scrollis set. The difference in width will be the size of the scrollbar.

使用 jQuery，您可以通过获取overflow: hidden设置和overflow: scroll设置时的宽度差来计算浏览器的滚动条宽度。宽度的差异将是滚动条的大小。

Here is a simple examplethat shows how you could do this.

这是一个简单的例子，展示了如何做到这一点。