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 相关文章推荐
JSQL  一个 web DB 的封装
May 05 Javascript
实现web打印的各种方法介绍及实现代码
Jan 09 Javascript
JavaScript中提前声明变量或函数例子
Nov 12 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
第一次接触神奇的Bootstrap菜单和导航
Aug 01 Javascript
ES6新特性三: Generator(生成器)函数详解
Apr 21 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
详解angular如何调用HTML字符串的方法
Jun 30 Javascript
深入理解Node内建模块和对象
Mar 12 Javascript
通过说明与示例了解js五种设计模式
Jun 17 Javascript
javascript+Canvas实现画板功能
Jun 23 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使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
jquery动态添加删除div 具体实现
2013/07/20 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
javascript闭包的理解
2015/04/01 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
JS 获取HTML标签内的子节点的方法
2016/09/21 Javascript
解析Javascript单例模式概念与实例
2016/12/05 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
Angular2实现组件交互的方法分析
2017/12/19 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
Python工程师面试题 与Python Web相关
2016/01/14 Python
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
Windows下python3.7安装教程
2018/07/31 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
介绍一下Java中的static关键字
2012/05/12 面试题
优秀毕业生推荐信范文
2014/03/07 职场文书
文科毕业生自荐书范文
2014/04/17 职场文书
先进工作者申报材料
2014/12/23 职场文书
武侯祠导游词
2015/02/04 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书