scroll家族属性
上一篇主要分析了一下offset家族属性，本篇文章则主要是来分析一下scroll家族属性。
首先，scroll家族包括4个属性：
- 网页正文宽度：document.body.scrollWidth;
- 网页正文高度：document.body.scrollHeight;
- 网页被卷去的高：document.body.scrollTop;
- 网页被卷去的左：document.body.scrollLeft;
接下来，我们先简单看一下相关属性。
例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
height: 3000px;
}
</style>
</head>
<body>
<script type="text/html">
</script>
</body>
</html>
在谷歌浏览器下面，我们会发现，虽然有滚动条，甚至在滚动时候，都没有打印值，那是因为我们在滚动的时候是触发的滚动事件，所以我们需要监听的是滚动事件。
因此，我们将上面的代码稍作修改。将js部分改为下面的这样的。
例2：
<script type="text/html">
window.onscroll = function () {
console.log(document.documentElement.scrollTop, document.documentElement.scrollLeft);
}
</script>
此时，我们就可以监听到浏览器的滚动事件相应的值了，
封装scroll
其实，在实际运用过程中，为了处理不同浏览器的差距，我们用来表示scroll的值的方式有所不同，这需要从浏览器的模式说起。早期的浏览器在对css进行解析的时候，并未遵循W3C标准，这时的解析方式被称为怪异模式（quirks）,后来随着W3C的标准越来越重要，众多的浏览器开始遵循W3C标准解析css，此时我们称为严格模式（strict mode）。
我们可以通过document.compatMode的值来判断是否处于标准模式，从而决定用什么方式获取相应的scroll值。
例3：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 3000px;
}
</style>
</head>
<body> <script>
function scroll() {
if(window.pageYOffset !== null){
return {
top: window.pageYOffset,
left: window.pageXOffset
}
}else if(document.compatMode === "CSS1Compat"){ // W3C
return {
top: document.documentElement.scrollTop,
left: document.documentElement.scrollLeft
}
}else{
return {
top: document.body.scrollTop,
left: document.body.scrollLeft
}
}
} window.onscroll = function () {
console.log(scroll().top);
}
</script>
</body>
</html>
在上面的代码中，我们通过判断不同的模式使用不同的方法获取scroll的值，并将这种方法进行封装，方便调用，这样就可以快速处理不同浏览器中的兼容性问题，获取我们需要的值了。
scroll家族属性的更多相关文章
- client家族属性
在前面总结了offset家族属性和scroll家族属性,今天来总结一下client家族属性,同前面一样,client家族也包宽高和左上,具体的通过代码来区别这三大家族属性的不同. <!DOCTY ...
- offse家族属性
在JavaScript中,常用offset.scroll和client家族属性来表示元素的位置和大小相关属性,最近在网上找到了一张图来表示三者之间的关系,正好可以在此借鉴一下. 本次主要来看一下off ...
- js中对象的一些特性，JSON，scroll家族
一.js中对象的一些特性 对象的动态特性 1.当对象有这个属性时,会对属性的值重写 2.当对象没有这个属性时,会为对象创建一个新属性,并赋值 获得对象的属性的方式 为元素设置DOM0级事件 二.JSO ...
- JavaScript offset、client、scroll家族
offsetParent <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- JavaScript Scroll家族以及封装
JavaScript Scroll家族以及封装 scrollTop & scrollLeft 别卷去的值,就是当滑动滚轮浏览网页的时候,网页隐藏在屏幕上方或左侧的距离 获得scrollTop ...
- 第52天：offset家族、scroll家族和client家族的区别
一.offset家族 1.offsetWidth offsetHeight offsetLeft offsetTop offsetParent共同组成了offset家族,用来获取元素尺寸. offse ...
- javaScript动画2 scroll家族
offsetWidth和offsetHight (检测盒子自身宽高+padding+border) 这两个属性,他们绑定在了所有的节点元素上.获取之后,只要调用这两个属性,我们就能够获取元素节点的宽和 ...
- 三大家族(offset、scroll、client)
offset.scroll.client三大家族 offset家族 offsetWidth 与 offsetHeight offset 偏移 用于获取元素自身的位置和大小 offsetWidth和of ...
- JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动
一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...
随机推荐
- LeetCode - Kth Largest Element in a Stream
Design a class to find the kth largest element in a stream. Note that it is the kth largest element ...
- CSVN备份初体验
备份方法挺多的,目前我知道有四种 其一: 首先复制旧csvn服务器上repositories下的版本库文件夹到新csvn服务器repositories文件夹下面(做以下修改时最好把csvn服务停掉) ...
- linux——git安装使用
系统环境centos7 安装git命令 yum install git -y 安装好之后使用命令查看git版本 git –version [root@bogon ~]# git --version g ...
- C++中的const关键字学习笔记
一.const引用 1. 例子一 #include <iostream> using namespace std; class sp { public: sp() {cout<< ...
- MySQL--字符集参数
================================================== MySQL字符集相关参数 character_set_client: 表示客户端请求数据的字符集 ...
- MySQL Binlog与数据变更
如果对满足WHERE条件数据执行UPDATE,而UPDATE未导致前后数据发生变化,这种情况下会产生二进制日志么? ========================================== ...
- About the test in development
Unit test: Specify and test one point of the contract of single method of a class. This should have ...
- pstStream->pstPack[i].pu8Addr详解
/****************************************************************************** * funciton : save H2 ...
- PADS 脚本记录：关于 getObjects
PADS 脚本记录:关于 getObjects GetObjects(plogObjectTypeComponent, "ZBOM*", False) 返回的一个对象,所有 ZBO ...
- Java面向对象 第1节 类和对象
一.Java 对象和类 面向对象语言三大特性:封装.继承.多态: 对象:描述客观事物的一个实体: 类:类是封装对象的属性和方法的载体,反过来说具有相同属性和行为的一类实体被称为类:类行为:方法:属性: ...