document.documentElement.scrollTop、document.body.scrollTop等兼容性

来源：互联网发布：cmd ftp 指定端口编辑：程序博客网时间：2024/06/02 00:09

获取滚动条距离兼容性

注：
Windows电脑，苹果Browser暂时无法验证！
DTD指最新：<!DOCTYPE html>
documentElement：整个节点树的根节点root，即标签
body：DOM对象里的body子节点，即标签

Chrome版本：版本 61.0.3163.100（正式版本）（64 位）
Firefox：49.0

// DTD不存在

    window.onscroll = function() {        console.log('document.body.scrollTop： ' + document.body.scrollTop);         // IE（7/8/9）——————————————————————————  document.body.scrollTop： 0        // IE（10/11）、Chrome、Firefox——————————————————————————  document.body.scrollTop： 变化的值        console.log('document.documentElement.scrollTop： ' + document.documentElement.scrollTop);        // Chrome、Firefox  ———————————————————— document.documentElement.scrollTop： 0        // IE（7/8/9/10/11）———————————————————— document.documentElement.scrollTop： 变化的值    };

// DTD存在

    window.onscroll = function() {        console.log('document.body.scrollTop： ' + document.body.scrollTop);         // IE（7/8/9/10/11）、Chrome、Firefox——————————————————————————  document.body.scrollTop： 0        console.log('document.documentElement.scrollTop： ' + document.documentElement.scrollTop);        // IE（7/8/9/10/11）、Chrome、Firefox  ———————————————————— document.documentElement.scrollTop： 变化的值    };

结论：

DTD存在， 必须用document.documentElement.scrollTop，而不是document.body.scrollTop。
DTD不存在，Chrome、Firefox必须用document.body.scrollTop，IE（7/8/9）必须用document.documentElement.scrollTop，IE（10/11）两者皆可。

跟下面两位描述的不太符合！（看博客文章记得要多动手、多验证啊！）
后面的是两位作者写博客的时间。

JS中出现的兼容性问题的总结
2017-01-02 21:09
获取scrollTop兼容各浏览器的方法，以及body和documentElement是啥？第1点 2013-12-25 13:22

又找了一篇发现描述又不一样，Chrome也有多个版本，从其描述上看并不是之前都一直支持document.documentElement.scrollTop的！
JS基础篇– body.scrollTop与documentElement.scrollTop

待读文章：
浏览器兼容性小记-DOM篇（二）
整理浏览器对网页的兼容性问题（一）——JS&DOM篇
DOM（一）一些属性方法介绍以及兼容性问题

阅读全文

0 0