js判断滚动条是否已到页面最底部或顶部实例


Posted in Javascript onNovember 20, 2014

本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法。分享给大家供大家参考。具体分析如下:

我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了,否则就自动隐藏了,下面就来给大家介绍这种效果实现原理与方法。

当可视区域小于页面的实际高度时,判定为出现滚动条,即:

if (document.documentElement.clientHeight < document.documentElement.offsetHeight) scroll = true;

要使用 document.documentElement ,必须在页面头部加入声明:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 
其实,这段代码是不起作用的,因为他没考虑到一个问题,就是浏览器的边框,当我们在获取页面的offsetHeight高度时是包括了浏览器的边框的,浏览器的边框是2个像素,所以这时无论在任何情况下clientHeight 始终是小于offsetHeight的,这就使得即使没有滚动条它也为true,因此我们要修正这个错误,代码应该这样改,在offsetHeight上减去4个像素,即:
if (document.documentElement.clientHeight < document.documentElement.offsetHeight-4){

//执行相关脚本。

}

还有,这里要搞清楚,上面这代码是判断横向滚动条的,我们一般要判断的是纵向滚动,代码如下:
if (document.documentElement.clientWidth < document.documentElement.offsetWidth-4){

//执行相关脚本。

}

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

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

}

}

示例2

在网上找的。还挺兼容浏览器的。奇怪的是我在文档里面没找到相关信息。代码贴出来吧。

/********************

* 取窗口滚动条高度 

******************/

function getScrollTop()

{

    var scrollTop=0;

    if(document.documentElement&&document.documentElement.scrollTop)

    {

        scrollTop=document.documentElement.scrollTop;

    }

    else if(document.body)

    {

        scrollTop=document.body.scrollTop;

    }

    return scrollTop;

}
/********************

* 取窗口可视范围的高度 

*******************/

function getClientHeight()

{

    var clientHeight=0;

    if(document.body.clientHeight&&document.documentElement.clientHeight)

    {

        var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;        

    }

    else

    {

        var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;    

    }

    return clientHeight;

}

/********************

* 取文档内容实际高度 

*******************/

function getScrollHeight()

{

    return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);

}

  function test(){

 if (getScrollTop()+getClientHeight()==getScrollHeight()){

  alert("到达底部");

 }else{

  alert("没有到达底部");

 }

}

补充:

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 浏览器可视部分高度

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

浏览器滚动部分高度即滚动条卷去部分高度即可视顶端距离整个对象顶端的高度。
看懂了上面的参数我们就可以做出兼容ie,ff,chrome浏览器的滚动效果了。

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Prototype Class对象学习
Jul 19 Javascript
Extjs中ComboBox加载并赋初值的实现方法
Mar 22 Javascript
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
利用vue写todolist单页应用
Dec 15 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
node结合swig渲染摸板的方法
Apr 11 Javascript
express+vue+mongodb+session 实现注册登录功能
Dec 06 Javascript
JS数组的常用方法整理
Mar 31 Javascript
js中数组排序sort方法的原理分析
Nov 20 #Javascript
javascript继承机制实例详解
Nov 20 #Javascript
jQuery验证插件 Validate详解
Nov 20 #Javascript
PHP中使用微秒计算脚本执行时间例子
Nov 19 #Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
Nov 19 #Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 #Javascript
jQuery Ajax()方法使用指南
Nov 19 #Javascript
You might like
创建配置文件 用PHP写出自己的BLOG系统 2
2010/04/12 PHP
php创建多级目录与级联删除文件的方法示例
2019/09/12 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
js不是基础的基础
2006/12/24 Javascript
纯js实现背景图片切换效果代码
2010/11/14 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
js进行表单验证实例分析
2015/02/10 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
JavaScript 中的无穷数(Infinity)详解
2020/02/13 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
详解Vue之计算属性
2020/06/20 Javascript
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
老生常谈进程线程协程那些事儿
2017/07/24 Python
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
Wiggle新西兰:自行车、跑步、游泳
2020/05/06 全球购物
到底Java是如何传递参数的?是by value或by reference?
2012/07/13 面试题
企业演讲稿范文
2013/12/28 职场文书
大学生毕业的自我评价分享
2014/01/02 职场文书
我的祖国演讲稿
2014/05/04 职场文书
2014年秋季开学寄语
2014/08/02 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
乌镇导游词
2015/02/02 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
军事博物馆观后感
2015/06/05 职场文书
2019大学生实习报告
2019/06/21 职场文书