获取滚动条宽度

最新推荐文章于 2024-05-29 16:27:42 发布

BigTooth19

最新推荐文章于 2024-05-29 16:27:42 发布

阅读量611

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_34044224/article/details/53766658

前端同时被 2 个专栏收录

15 篇文章

订阅专栏

javascript

12 篇文章

订阅专栏

本文介绍了如何使用JavaScript来获取页面及特定元素的滚动条宽度。通过简单的代码示例展示了两种应用场景：一是获取整个页面body的滚动条宽度；二是针对具体带有滚动条的元素，计算其滚动条的实际宽度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

获取body滚动条的宽度：

var scrollbarWidth = document.documentElement.clientWidth - document.body.clientWidth

获取元素的滚动条宽度：

<div class="wrap" style="width:200px;height:200px;border:1px solid #ccc;overflow:auto;">
	<div class="inner" style="width:100%;height:1000px;background-color:#f00;"></div>
</div>
<script type="text/javascript">
var ele = document.getElementsByClassName('wrap')[0]
var scrollbarWidth = ele.offsetWidth - ele.clientWidth;
console.log(scrollbarWidth);
</script>