原文

本文实例讲述了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程序设计有所帮助。

js判断滚动条是否已到页面最底部或顶部实例的更多相关文章

  1. 不同浏览器对document.documentElement和document.body的scrollheight ,scrollTop,clientHeight以及判断滚动条是否滚动到页面最底部 【转载】

    前段时间学习怎么写一个瀑布流的时候,就接触到document.documentElement和document.body的区别,然后今天查资料的时候看到这篇博客,遂转载记录在此. 两种特殊的文档属性可 ...

  2. IE,火狐,谷歌浏览器下js判断滚动条是否已拉到页面最底部

    E/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到 ...

  3. 各种height 以及判断滚动条是否已拉到页面最底部

    DTD已声明 IEdocument.documentElement.scrollHeight  浏览器所有内容高度 ,document.body.scrollHeight  浏览器所有内容高度docu ...

  4. IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到页面最底部

    DTD已声明 IE document.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度 docu ...

  5. js 判断滚动条是否停止滚动

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 一个JS判断客户端是否已安装某个字体(Only IE)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. js判断登陆用户名及密码是否为空的简单实例

    js判断登陆用户名及密码是否为空的简单实例 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <script type="text/javascript ...

  8. JS判断滚动条到底部，页面是否有滚动条

    要判断页面滚动条是否到底,需要了解三个属性: scrollHeight:获取元素内容高度的度量,包括由于溢出导致的视图中不可见内容,说直白点,算上了滚动条不可见的那部分高度. clientHeight ...

  9. js判断滚动条到底部

    判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上的滚动距离. clientHeight为内容 ...

随机推荐

  1. phpspider爬虫框架的使用

    这几天使用PHP的爬虫框架爬取了一些数据,发现还是挺方便的,先上爬虫框架的文档 phpspider框架文档 使用方法其实在文档中写的很清楚而且在demo中也有使用示例,这里放下我自己的代码做个笔记 & ...

  2. js中数组方法及分类

    数组的方法有很多,这里简单整理下常用的21种方法,并且根据它们的作用分了类,便于记忆和理解. 根据是否改变原数组,可以分为两大类,两大类又根据不同功能分为几个小类 一.操作使原数组改变   1.数组的 ...

  3. IO 理论 SOCK理论

    IO密集型程序 在程序执行过程中存在大量IO操作,而CPU操作较少,消耗CPU较少,运行效率较低CPU(计算)密集型程序 在程序执行中,CPU运算较多,IO操作相对较少(消耗CPU大,运行速度快)IO ...

  4. db2数据库的备份与还原

    前言: 数据备份的重要性: 提高系统的高可用性和灾难可恢复性:(在数据库系统崩溃的时候,没有数据库备份怎么办!) 使用数据库备份还原数据库是数据库系统崩溃时提供数据恢复最小代价的最优方案:(总不能让客 ...

  5. Oracle笔记（十） 约束

    表虽然建立完成了,但是表中的数据是否合法并不能有所检查,而如果要想针对于表中的数据做一些过滤的话,则可以通过约束完成,约束的主要功能是保证表中的数据合法性,按照约束的分类,一共有五种约束:非空约束.唯 ...

  6. 七：mvc使用CodeFirst（代码优先）创建数据库

    1. 理解EF CodeFirst模式特点 2. 使用CodeFirst模式生成数据库 1. CodeFirst模式(代码优先) Code First是Entity Framework提供的一种新的编 ...

  7. SQL Server 排序规则的影响

    目录 SQL Server 排序规则 影响 效果演示 更改数据库排序规则 服务器级排序规则 数据库级排序规则 列级排序规则 查询时指定规则 建议 使用 Unicode 数据类型 使用二进制排序规则 [ ...

  8. c#中打开视频，word

    打开所有的文件的 代码,包括word/ppt/txt/xls/mp3/视频文件 添加using using System.Diagnostics; string fileName = @"D ...

  9. C#的Lazy与LazyInitializer

    class Program { static void Main(string[] args) { //初始化 Lazy 类的新实例 //当延迟初始化发生时,将使用指定的初始化函数和初始化模式 // ...

  10. 【转载】总结：几种生成HTML格式测试报告的方法

    总结:几种生成HTML格式测试报告的方法 写自动化测试时,一个很重要的任务就是生成漂亮的测试报告. 1.用junit或testNg时,可以用ant辅助生成html格式: <target name ...