Question

这是我的代码：

<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>

div.scroll {
    background-color: #00FFFF;
    width: 100px;
    height: 100px;
    overflow: scroll;
}

如何找到滚动条宽度？

示例链接：https://jsfiddle.net/zc5hrkst/

Answer 1

这段javascript应该会给你滚动条宽度。

// Select the Element
var scroll = document.getElementById("[id of div]");

// Get the scrollbar width
var scrollbarWidth = scroll.offsetWidth - scroll.clientWidth;
console.log(scrollbarWidth);

Answer 2

这取决于网络浏览器。通常它应该是17px。

Answer 3

您可以通过从clientWidth中删除offsetWidth来获取y轴滚动条。

var scroll = document.getElementById('scroll');
var scrollWidth = $(scroll)[0].offsetWidth - $(scroll)[0].clientWidth
alert(scrollWidth);

查找更新的小提琴here

要查找x轴滚动条的高度，您可以使用offsetHeight和clientWidth：

var yScrollHeight = $(scroll)[0].offsetHeight - $(scroll)[0].clientHeight;

如何找到滚动条宽度

3 个答案: