zoukankan      html  css  js  c++  java
  • IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉

    DTD已声明
    IE
    document.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度
    document.documentElement.scrollTop 浏览器滚动部分高度,document.body.scrollTop 始终为0
    document.documentElement.clientHeight 浏览器可视部分高度,document.body.clientHeight 浏览器所有内容高度

    FF
    document.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度
    document.documentElement.scrollTop 浏览器滚动部分高度,document.body.scrollTop 始终为0
    document.documentElement.clientHeight 浏览器可视部分高度,document.body.clientHeight 浏览器所有内容高度

    Chrome
    document.documentElement.scrollHeight 浏览器所有内容高度, document.body.scrollHeight 浏览器所有内容高度
    document.documentElement.scrollTop 始终为0,document.body.scrollTop 浏览器滚动部分高度
    document.documentElement.clientHeight 浏览器可视部分高度,document.body.clientHeight 浏览器所有内容高度

    DTD未声明
    IE
    document.documentElement.scrollHeight 浏览器可视部分高度,document.body.scrollHeight 浏览器所有内容高度
    document.documentElement.scrollTop 始终为0,document.body.scrollTop 浏览器滚动部分高度
    document.documentElement.clientHeight 始终为0,document.body.clientHeight 浏览器可视部分高度

    FF
    document.documentElement.scrollHeight 浏览器可视部分高度, document.body.scrollHeight 浏览器所有内容高度
    document.documentElement.scrollTop 始终为0,document.body.scrollTop 浏览器滚动部分高度
    document.documentElement.clientHeight 浏览器所有内容高度,document.body.clientHeight 浏览器可视部分高度

    Chrome
    document.documentElement.scrollHeight 浏览器可视部分高度,document.body.scrollHeight 浏览器所有内容高度
    document.documentElement.scrollTop 始终为0,document.body.scrollTop 浏览器滚动部分高度
    document.documentElement.clientHeight 浏览器所有内容高度,document.body.clientHeight 浏览器可视部分高度

    浏览器所有内容高度即浏览器整个框架的高度,包括滚动条卷去部分+可视部分+底部隐藏部分的高度总和

    浏览器滚动部分高度即滚动条卷去部分高度即可视顶端距离整个对象顶端的高度。

    综上

    1、document.documentElement.scrollTop和document.body.scrollTop始终有一个为0,所以可以用这两个的和来求scrollTop

    2、scrollHeight、clientHeight 在DTD已声明的情况下用documentElement,未声明的情况下用body

    这里之前有误, document.compatMode 可以用来判断是否声明了DTD, 值为”BackCompat”:未声明,值为”CSS1Compat”:已声明。

    所以,判断滚动条是否已拉到页面最底部,可以用如下代码

    window.onscroll  = function (){
        var marginBot = 0;
        if (document.compatMode === "CSS1Compat"){
            marginBot = document.documentElement.scrollHeight - (document.documentElement.scrollTop+document.body.scrollTop)-  document.documentElement.clientHeight;
        } else {
            marginBot = document.body.scrollHeight - document.body.scrollTop-  document.body.clientHeight;
        }
        if(marginBot<=0) {
            //do something        
        }
    }
  • 相关阅读:
    数据库的规范和SQL优化技巧总结
    新版Intellij idea破解方法(插件IDE Eval Reset)
    容易遗忘的知识点总结
    Java如何搭建脚手架(自动生成通用代码),创建自定义的archetype(项目模板)
    阿里云服务器域名解析和ICP域名备案
    云服务器通过ip无法访问
    FirewallD is not running 远程服务器开启端口报错
    [prerender-spa-plugin] Unable to prerender all routes! 内网打包报错(Navigation Timeout Exceeded)
    vue-cli中的 mode模式、env环境文件,以及其中定义的环境变量
    绘制柱状图和横向条形图,带数据标签!!!
  • 原文地址:https://www.cnblogs.com/jiandanshishu/p/12953297.html
Copyright © 2011-2022 走看看