js 获取滚动条高度

// 获取滚动条高度的示例代码

// 方法一：获取整个文档的高度
function getDocHeight() {
    const body = document.body;
    const html = document.documentElement;

    // 返回文档的高度，兼容不同浏览器
    return Math.max(
        body.scrollHeight, body.offsetHeight, 
        html.clientHeight, html.scrollHeight, html.offsetHeight
    );
}

// 方法二：获取当前窗口的可视高度
function getWindowHeight() {
    return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
}

// 方法三：获取滚动条的高度（即文档超出窗口部分的高度）
function getScrollHeight() {
    return getDocHeight() - getWindowHeight();
}

// 调用函数并输出结果
console.log("滚动条高度: " + getScrollHeight() + "px");

解释说明：

1. getDocHeight：该函数用于获取整个文档的高度。由于不同浏览器对文档高度的属性定义不同，因此使用 Math.max 来确保返回最大值，以兼容所有浏览器。
2. getWindowHeight：该函数用于获取当前窗口的可视高度。同样考虑到浏览器兼容性，使用了多种方式来获取窗口高度。
3. getScrollHeight：该函数通过计算文档高度减去窗口可视高度，得到滚动条的高度，即文档超出窗口部分的高度。

最后通过 console.log 输出滚动条的高度。