获取浏览器当前页面的滚动条高度的兼容写法，需要考虑文档的documentElement和body元素，以及标准模式和怪异模式下的差异。以下是一种通用的兼容性写法：
function getScrollTop() {
return Math.max(
// Chrome, Firefox, IE (Edge) 标准模式下的兼容写法
document.documentElement.scrollTop,
// Chrome, Firefox, IE (Edge) 怪异模式下的兼容写法
document.body.scrollTop,
// iOS Safari
window.pageYOffset
);
}
// 使用示例
let scrollTop = getScrollTop();
console.log("当前滚动条高度:", scrollTop);
// 另一种更简洁的写法，利用||运算符的短路特性
function getScrollTopConcise() {
return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
}
// 使用示例
scrollTop = getScrollTopConcise();
console.log("当前滚动条高度 (简洁写法):", scrollTop);
解释：
-
window.pageYOffset: 这是获取滚动条高度的标准方法，在大多数现代浏览器中都支持，包括移动端浏览器。 -
document.documentElement.scrollTop: 在标准模式下，滚动条高度通常存储在documentElement（即<html>元素）的scrollTop属性中。 -
document.body.scrollTop: 在怪异模式下（没有声明DOCTYPE或声明了错误的DOCTYPE），滚动条高度可能存储在body元素的scrollTop属性中。 -
Math.max(...)或||: 使用Math.max或||运算符可以确保在不同浏览器和模式下都能获取到正确的值。||运算符利用了短路求值的特性，如果window.pageYOffset有值（非0），则直接返回该值；否则继续判断下一个，直到找到一个非0的值或返回 0。 -
0(在简洁写法中): 如果所有其他方法都失败，则返回 0，表示没有滚动。
建议:
优先使用 window.pageYOffset，因为它是最标准和最可靠的方法。简洁写法更方便，但在需要更精细的控制或需要处理一些特殊情况时，Math.max 的写法可能更清晰。
额外说明： 对于水平滚动条，可以使用 window.pageXOffset、document.documentElement.scrollLeft 和 document.body.scrollLeft。 逻辑与垂直滚动条相同。