js判断滚动条是否已到页面最底部或顶部实例
2016-07-06 16:13
721 查看
本文实例讲述了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程序设计有所帮助。
我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了,否则就自动隐藏了,下面就来给大家介绍这种效果实现原理与方法。
当可视区域小于页面的实际高度时,判定为出现滚动条,即:
复制代码代码如下:
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数据类型&&typeof&&其他
- JavaScript基础知识
- zepto源码研究 - zepto.js (zepto.init)
- JS中函数名后面的括号加与不加的区别和作用?
- 1.3 将非标准日期转换成标准javascript日期 P27
- zepto源码研究 - zepto.js - 1
- ajax异步从前台JS传值到后台的几种方法,多个参数
- js深拷贝和浅拷贝
- js中Window 对象及其的方法
- JavaScript——一些用法的Mark
- 浏览器中开发人员工具快速找到dom元素绑定那些JS事件
- json 解析
- js 程序执行与顺序实现详解
- JVM JSTAT命令的用法和参数讲解
- jsoup
- JavaScript 常用对象
- net.sf.json.JSONException: There is a cycle in the hierarchy!错误解决方案
- JavaScript强化教程——Native.js示例汇总
- JavaScript强化教程——Native.js示例汇总