jquery 如何获取滚动条的宽度(图文)

下面说一下使用jquery 获取页面滚动条的宽度,来控制页面显示比例

代码:

var scrollbarWidth = $('#main')[0].offsetWidth - $('#main')[0].scrollWidth;

offsetWidth是div的宽带包括滚动条在内

scrollWidth是div的滚动宽度不包括滚动条

javascript获取滚动条的宽度方法如下:

var scrollbarWidth = document.getElementById('main').offsetWidth - document.getElementById('main')..scrollWidth;

完整的实例代码如下:

jquery 如何获取滚动条的宽度

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</script>
<script>
$(document).ready(function(){
  
var scrollbarWidth = $('#main')[0].offsetWidth - $('#main')[0].scrollWidth;
  alert('滚动条的宽度是:' + scrollbarWidth + 'px');
});
</script>
</head>
<body>

<div id="main" style="height:300px;width:300px;overflow-y:auto;border: 1px double #abc;">
<div id=""  style="height:400px;width:100%;">
1212121<br>
1212121<br>
1212121<br>
1212121<br>
</div>
</div>
</body>

 

来源://作者:/更新时间:2014-06-11
相关文章