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 相关文章推荐
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
Jan 08 Javascript
JS 跳转页面延迟2种方法
Mar 29 Javascript
Js实现网页键盘控制翻页的方法
Oct 30 Javascript
轻量级的原生js日历插件calendar.js使用指南
Apr 28 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
js cookie实现记住密码功能
Jan 17 Javascript
ztree加载完成后显示勾选节点的实现代码
Oct 22 Javascript
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 Javascript
微信小程序云开发之使用云数据库
May 17 Javascript
layui默认选中table的CheckBox复选框方法
Sep 19 Javascript
Vue双向绑定实现原理与方法详解
May 07 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 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
js中将具有数字属性名的对象转换为数组
2011/03/06 Javascript
jquery 选项卡效果 新手代码
2011/07/08 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
使用jquery实现简单的ajax
2013/07/08 Javascript
JS功能代码集锦
2016/05/04 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
Python解决八皇后问题示例
2018/04/22 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
Python爬虫库BeautifulSoup的介绍与简单使用实例
2020/01/25 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
Python中if有多个条件处理方法
2020/02/26 Python
简单的Python人脸识别系统
2020/07/14 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
html5 input输入实时检测以及延时优化
2018/07/18 HTML / CSS
在线学习西班牙语、法语或其他语言:Babbel.com
2018/02/07 全球购物
房产买卖委托公证书
2014/04/04 职场文书
法律系毕业生求职信
2014/05/28 职场文书
银行服务明星推荐材料
2014/05/29 职场文书
求职自我推荐信
2014/06/25 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
企业法人授权委托书
2014/09/25 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书