获取浏览器当前页面的滚动条高度的兼容写法

获取浏览器当前页面的滚动条高度的兼容写法，需要考虑文档的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，表示没有滚动。