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 相关文章推荐
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 Javascript
两种不同的方法实现js对checkbox进行全选和反选
May 13 Javascript
多个$(document).ready()的执行顺序实例分析
Jul 26 Javascript
JS合并数组的几种方法及优劣比较
Sep 19 Javascript
在for循环中length值是否需要缓存
Jul 27 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
javascript原生ajax写法分享
Apr 10 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
微信小程序实现简单评论功能
Nov 28 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
Jun 01 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的FTP学习(一)[转自奥索]
2006/10/09 PHP
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
PHP中对于浮点型的数据需要用不同的方法解决
2014/03/11 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
JQuery与Ajax常用代码实现对比
2009/10/03 Javascript
jQuery 处理表单元素的代码
2010/02/15 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
解决VUEX的mapState/...mapState等取值问题
2020/07/24 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
2020/08/06 Javascript
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
营销主管自我评价怎么写
2013/09/19 职场文书
社区学习十八大感想
2014/01/22 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
小学新教师个人总结
2015/02/05 职场文书
消防安全培训工作总结
2015/10/23 职场文书
电力安全学习心得体会
2016/01/18 职场文书
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript