zoukankan      html  css  js  c++  java
  • IE,火狐,谷歌浏览器下js判断滚动条是否已拉到页面最底部

    E/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

    3、document.documentElement.scrollTop在未声明的情况下始终为0,所以可以用来判断是否声明了DTD;

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

    <script>
        window.onscroll = function (){
            var marginBot = 0;
            if (document.documentElement.scrollTop){
                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
                alert('正在请求数据');
            }
        }
    </script>
  • 相关阅读:
    适合 C++ 新手学习的开源项目——在 GitHub 学编程
    原生JS封装常用函数
    C# 将excel文件导入到SqlServer数据库
    热配置的部署以及容易失败原因
    连接真机开发安卓(Android)移动app MUI框架 添加购物车等——混合式开发(四)
    标志寄存器06 零基础入门学习汇编语言59
    指针07 零基础入门学习C语言47
    标志寄存器05 零基础入门学习汇编语言58
    标志寄存器03 零基础入门学习汇编语言56
    标志寄存器04 零基础入门学习汇编语言57
  • 原文地址:https://www.cnblogs.com/phpfensi/p/3852736.html
Copyright © 2011-2022 走看看