返回

浏览器滚动条高度的获取

前端

浏览器滚动条高度的获取——兼容各种浏览器 #

前言

最近在做业务需求时，需要监听滚动条scroll事件，获取滚动条高度，使用document.body.scrollTop发现得到的值一直是0，后来做了一些查询，挖出不少秘密，做次笔记，以免忘掉。

先放结论：

滚动条的获取方法是：

let scrollTop = document.documentElement.scrollTop || document.body.scrollTop

本文目录

  • 不同方法比较
  • 解决方案
  • 总结

不同方法比较

1. scroll 方法

scroll方法获取的是当前元素被卷起的部分的距离。如果元素是滚动区域，则该方法返回该区域被卷起的像素数。否则，scroll 方法返回元素的容器的卷起像素数。

2. body.scrollTop 方法

body.scrollTop 方法返回元素的卷起位置。如果元素是body元素，则该方法返回页面的卷起位置。

3. body.scrollTop 方法

body.scrollTop 方法返回滚动条距离body元素顶部的位置。如果滚动条距离body元素顶部较远，则该方法返回一个较大值。

4. documentElement.scrollTop 方法

documentElement.scrollTop 方法返回滚动条距离文档顶部的位置。如果滚动条距离文档顶部较远，则该方法返回一个较大值。

解决方案

从兼容性的角度出发，建议使用以下方法获取浏览器滚动条高度：

let scrollTop = document.documentElement.scrollTop || document.body.scrollTop

总结

本文介绍了如何获取浏览器滚动条高度，并对不同方法进行了比较。最后，本文给出了一个兼容性较好的解决方案。

实例代码

<!DOCTYPE html>
<html>
<head>
    
</head>
<body>
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus finibus. Donec eget laoreet libero. Sed convallis scelerisque mauris, sed ultricies nisi tincidunt id. Phasellus euismod lacus sit amet pulvinar egestas. Integer euismod lacus sed ligula placerat, eget ullamcorper massa tincidunt. Suspendisse potenti. Maecenas eget lacus eget nunc luctus finibus. Donec eget laoreet libero. Sed convallis scelerisque mauris, sed ultricies nisi tincidunt id. Phasellus euismod lacus sit amet pulvinar egestas. Integer euismod lacus sed ligula placerat, eget ullamcorper massa tincidunt. Suspendisse potenti.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus finibus. Donec eget laoreet libero. Sed convallis scelerisque mauris, sed ultricies nisi tincidunt id. Phasellus euismod lacus sit amet pulvinar egestas. Integer euismod lacus sed ligula placerat, eget ullamcorper massa tincidunt. Suspendisse potenti. Maecenas eget lacus eget nunc luctus finibus. Donec eget laoreet libero. Sed convallis scelerisque mauris, sed ultricies nisi tincidunt id. Phasellus euismod lacus sit amet pulvinar egestas. Integer euismod lacus sed ligula placerat, eget ullamcorper massa tincidunt. Suspendisse potenti.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus finibus. Donec eget laoreet libero. Sed convallis scelerisque mauris, sed ultricies nisi tincidunt id. Phasellus euismod lacus sit amet pulvinar egestas. Integer euismod lacus sed ligula placerat, eget ullamcorper massa tincidunt. Suspendisse potenti. Maecenas eget lacus eget nunc luctus finibus. Donec eget laoreet libero. Sed convallis scelerisque mauris, sed ultricies nisi tincidunt id. Phasellus euismod lacus sit amet pulvinar egestas. Integer euismod lacus sed ligula placerat, eget ullamcorper massa tincidunt. Suspendisse potenti.</p>
    </div>
    <script>
        // 获取滚动条高度
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

        // 输出滚动条高度
        console.log(scrollTop);
    </script>
</body>
</html>

运行结果

100