Question

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

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

Answer 1

我想出了如何使用以下代码精确地使用滚动条获取视口宽度：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;  
});

它的作用：

当您的网页准备就绪后＃39;或者调整大小，该函数计算正确的窗口高度和宽度（包括滚动条）。

Answer 2

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

然而，视口，只有页面（和滚动条）呈现给用户的区域，意思是，没有浏览器菜单，没有书签或其他任何东西，只有呈现的页面，是这样的滚动条可能存在的地方。 / p>
假设您想要这样，您可以测量客户端浏览器视口大小，同时考虑到滚动条的大小。

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

希望它有所帮助。

Answer 3

只要正文为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;
}

脚本：

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

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

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

Answer 4

目前新的 vw 和 vh css3属性将显示完整尺寸，包括滚动条。

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

如果这是一个错误，可以在线进行一些讨论。

Answer 5

滚动条之后没有任何内容，因此＆＃34;窗口的其余部分＆＃34;是什么？

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

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

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

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

Answer 6

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

以下是 simple example ，说明了如何执行此操作。

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

Answer 8

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

body {
   width: 100vw;
}

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

Answer 9

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

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

这很简单，但它确实有效。请务必添加注释，说明为何两次分配相同的值：）

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

9 个答案: