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

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

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

Answer 1

只要body是100％， document.body.scrollWidth就可以了。

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

HTML：

CSS：

 body, html { margin: 0; padding: 0; width: 100%; } div { height: 1500px; } 

脚本：

 var widths = 'viewport width (body.scrollWidth): ' + document.body.scrollWidth + '
' + 'window.innerWidth: ' + window.innerWidth + '
'; document.getElementById( 'widths' ).innerHTML = widths; 

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

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

它能做什么：

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

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

希望能帮助到你。

Answer 4

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

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

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

Answer 5

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

但是，是的一种方法是在身体中制作另一个包装div，其中一切都进行，身体overflow:none; height:100%; width:100%; 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时获取宽度差来计算浏览器的滚动条宽度。 宽度的差异将是滚动条的大小。

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

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

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

 body { width: 100vw; } 

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

Answer 9

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

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

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