jquery 如何获取滚动条的宽度(图文)
下面说一下使用jquery 获取页面滚动条的宽度，来控制页面显示比例
var scrollbarWidth = $('#main')[0].offsetWidth - $('#main')[0].scrollW
offsetWidth是div的宽带包括滚动条在内
scrollWidth是div的滚动宽度不包括滚动条
javascript获取滚动条的宽度方法如下：
var scrollbarWidth = document.getElementById('main').offsetWidth - document.getElementById('main')..scrollW
完整的实例代码如下：
&!DOCTYPE html&
&script type=&text/javascript& src=&/jquery-1.11.1.min.js&&&/script&
$(document).ready(function(){
var scrollbarWidth = $('#main')[0].offsetWidth - $('#main')[0].scrollW
alert('滚动条的宽度是：' + scrollbarWidth + 'px');
&div id=&main& style=&height:300width:300overflow-y:border: 1px double #&&
&div id=&&
style=&height:400width:100%;&&
1212121&br&
1212121&br&
1212121&br&
1212121&br&
相关文章：原生js获取宽高与jquery获取宽高的方法关系对比
这篇主要介绍了原生js获取宽高与jquery获取宽高的方法关系对比,需要的朋友可以参考下
说明：1、因为获取高度的情况跟获取宽度的情况一样，所以以下只说获取宽度的情况。
　　　2、以下所说的所有方法与属性所返回的值都是不带单位的。
　　　3、为了方便说明，以下情况采用缩写表示：
　　　　obj -& 在原生JS中表示DOM对象；在JQuery中表示JQuery对象
　　　　Width -& obj.style.width
　　　　OffsetWidth -& obj.offsetWidth
　　　　$width -& obj.width()
　　　　$innerWidth -& obj.innerWidth()
　　　　$outerWidth -& obj.outerWidth()
　　　　padding -& 表示对象的padding-left和padding-right之和
　　　　border -& 表示对象的border-left-width和border-right-width之和
原生JS获取宽度的相关属性有 width和offsetWidth。width的获取方法是obj.style.width，只有当对象是通过内嵌方式设定宽度时才能获得，否则返回的是一个空字符串。offsetWidth获得的值跟JQuery中获得对象的outerWidth一样，offsetWidth是非标准的但却得到很好支持的属性。
JQuery获得宽度的方法有width()、innerWidth()、outerWidth()这三种方法。具体使用方式是：obj.width()、obj.innerWidth()、obj.outerWidth()。width()获得的是对象的内容宽度，innerWidth()获得的是对象的内容宽度与填充宽度的和，outerWidth()获得的是包括边框、填充宽度与内容宽度在内的宽度。
这五种方法之间的关系如下：
offsetWidth = border + padding +
$innerWidth = padding +
$outerWidth = border + padding +
这五种方法对firefox、chrome、opera、safari、ie6、ie7、ie8、ie9都兼容，只是存在着两种问题：1、width在没有设定的情况下，chrome在第一次打开页面时，所获取到的宽度全部都是错误的。第二次打开时，结果就跟firefox一致。2、ie6未设定宽高的情况下，不会出现滚动条。博客分类：
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
　　以上主要指IE之中，FireFox差异如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
　　测试代码：
[Copy to clipboard]
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]"&
&html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]" lang="gb2312"&
&title& 代码实例：关于clientWidth、offsetWidth、clientHeight、offsetHeight的测试比较 &/title&
&meta http-equiv="content-type" content="text/ charset=gb2312" /&
&meta name="author" content="枫岩,CnLei.y."&
&meta name="copyright" content="[url=][/url]" /&
&meta name="description" content="关于clientWidth、offsetWidth、clientHeight、offsetHeight的测试比较" /&
&style type="text/css" media="all"&
body {font-size:14}
a,a:visited {color:#00f;}
#Div_CnLei {
height:200
padding:10
border:10px solid #
background:#
font-size:12
#Div_CnLei p {margin:0;padding:10background:#}
&script type="text/javascript"&
function Obj(s){
return document.getElementById(s)?document.getElementById(s):s;
function GetClientWidth(o){
return Obj(o).clientW
function GetClientHeight(o){
return Obj(o).clientH
function GetOffsetWidth(o){
return Obj(o).offsetW
function GetOffsetHeight(o){
return Obj(o).offsetH
&p&点击下面的链接:&/p&
&div id="Div_CnLei"&
&p&&a href=http://bbs.chinaunix.net/"javascript:alert(GetClientWidth('Div_CnLei'));"&GetClientWidth();&/a&
&a href=http://bbs.chinaunix.net/"javascript:alert(GetClientHeight('Div_CnLei'));"&GetClientHeight();&/a&&/p&
&p&&a href=http://bbs.chinaunix.net/"javascript:alert(GetOffsetWidth('Div_CnLei'));"&GetOffsetWidth();&/a&
&a href=http://bbs.chinaunix.net/"javascript:alert(GetOffsetHeight('Div_CnLei'));"&GetOffsetHeight();&/a&&/p&
&div id="Description"&
&p&&strong&IE6.0、FF1.06+：&/strong&&br /&
clientWidth = width + padding = 300+10×2 = 320&br /&
clientHeight = height + padding = 200+10×2 = 220&br /&
offsetWidth = width + padding + border = 300+10×2+10×2= 340&br /&
offsetHeight = height + padding + border = 200+10×2+10×2 = 240&/p&
&p&&strong&IE5.0/5.5：&/strong&&br /&
clientWidth = width - border = 300-10×2 = 280&br /&
clientHeight = height - border = 200-10×2 = 180&br /&
offsetWidth = width = 300&br /&
offsetHeight = height = 200&/p&
HTML控件offsetTop、scrollTop等属性假设 obj 为某个 HTML 控件。
obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。
obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。
obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。
我们对前面提到的“上方或上层”与“左方或上层”控件作个说明。
例如：&div id="tool"&
&input type="button" value="提交"&
&input type="button" value="重置"&&/div&
“提交”按钮的 offsetTop 指“提交”按钮距“tool”层上边框的距离，因为距其上边最近的是 “tool” 层的上边框。“重置”按钮的 offsetTop 指“重置”按钮距“tool”层上边框的距离，因为距其上边最近的是 “tool” 层的上边框。
“提交”按钮的 offsetLeft 指“提交”按钮距“tool”层左边框的距离，因为距其左边最近的是 “tool” 层的左边框。“重置”按钮的 offsetLeft 指“重置”按钮距“提交”按钮右边框的距离，因为距其左边最近的是“提交”按钮的右边框。
以上属性在 FireFox 中也有效。
另外：我们这里所说的是指 HTML 控件的属性值，并不是 document.body，document.body 的值在不同浏览器中有不同解释（实际上大多数环境是由于对 document.body 解释不同造成的，并不是由于对 offset 解释不同造成的）。
本文来自CSDN博客，转载请标明出处：
浏览 17868
浏览: 790567 次
来自: 深圳
简介易懂、
解决我的问题
都是些基本的概念呀！
哥们，你也是搞水利这块的吧。本帖子已过去太久远了，不再提供回复功能。js/jquery获取浏览器滚动条高度和宽度实现用法详解-js教程-PHP中文网QQ群微信公众号还没有收藏js/jquery获取浏览器滚动条高度和宽度实现用法详解获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下。IE中，浏览器显示窗口大小只能以下获取： 代码如下复制代码 document.body.offsetWidth
document.body.offsetHeight在声明了DOCTYPE的浏览器中，可以用以下来获取浏览器显示窗口大小： 代码如下复制代码document.documentElement.clientWidth
document.documentElement.clientHeightIE，FF，Safari皆支持该方法，opera虽支持该属性，但是返回的是页面尺寸；同时，除了IE以外的所有浏览器都将此信息保存在window对象中，可以用以下获取： 代码如下复制代码 window.innerWidth
window.innerHeight整个网页尺寸一般获得方法 代码如下复制代码document.body.scrollWidth
document.body.scrollHeight屏幕分辨率高度一般获得方法 代码如下复制代码 window.screen.height
window.screen.width总结一下实例function getViewSizeWithoutScrollbar(){//不包含滚动条
width : document.documentElement.clientWidth,
height: document.documentElement.clientHeight
function getViewSizeWithScrollbar(){//包含滚动条
if(window.innerWidth){
width : window.innerWidth,
height: window.innerHeight
}else if(document.documentElement.offsetWidth == document.documentElement.clientWidth){
width : document.documentElement.offsetWidth,
height: document.documentElement.offsetHeight
width : document.documentElement.clientWidth + getScrollWith(),
height: document.documentElement.clientHeight + getScrollWith()
}另附最常用的获取整页宽高的方法（需要jquery框架）$(document).width() & $('body').width() ? $(document).width() : $('body').width();
$(document).height() & $('body').height() ? $(document).height() : $('body').height();alert($(window).height()); //浏览器时下窗口可视区域高度
alert($(document).height()); //浏览器时下窗口文档的高度
alert($(document.body).height());//浏览器时下窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器时下窗口可视区域宽度
alert($(document).width());//浏览器时下窗口文档对于象宽度
alert($(document.body).width());//浏览器时下窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding marginalert($(document).scrollTop()); //获取滚动条到顶部的垂直高度
alert($(document).scrollLeft()); //获取滚动条到左边的垂直宽度以上就是js/jquery获取浏览器滚动条高度和宽度实现用法详解的详细内容，更多请关注php中文网其它相关文章！共3篇168点赞收藏分享：.&猜你喜欢PHP中文网：独家原创，永久免费的在线，php技术学习阵地！
All Rights Reserved | 皖B2-QQ群:关注微信公众号}