怎么获取到滚动条本身的高度
时间: 2024-10-11 20:14:06 浏览: 8
在JavaScript中,获取滚动条高度通常通过检测浏览器窗口的滚动条样式属性或者直接访问DOM元素的scrollHeight属性。以下是几种常见的方式:
1. **CSS样式**:
```javascript
var scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
```
这种方法利用了滚动条宽度与视口宽度之间的差值,但并不精确。
2. **Element对象**:
```javascript
function getScrollbarHeight() {
var outer = document.createElement("div");
outer.style.visibility = "hidden";
outer.style.width = "100px";
outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps
document.body.appendChild(outer);
var widthNoScroll = outer.offsetWidth;
outer.style.overflow = "scroll";
// force scrollbars to appear
outer.style.height = "100%";
outer.style.paddingTop = "100%";
var widthWithScroll = outer.offsetWidth;
// remove the element
document.body.removeChild(outer);
return widthNoScroll - widthWithScroll;
}
```
这个函数创建了一个临时的`div`元素,并调整其样式,然后比较添加滚动条前后的宽度差异,得到滚动条的高度。