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 ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...
随机推荐
- PWA需要的技术
1 Manifest https://developer.mozilla.org/zh-CN/docs/Web/Manifest 2 Service Work ...
- 动手动脑-Java的继承与多态
一. class Grandparent { public Grandparent() { System.out.println("GrandParent Created."); ...
- MySQL Transaction--TPS计算规则
TPS计算规则 在MYSQL 中,TPS(Transaction Per Second)的计算方法为 (com_commit+com_rollback)/time,但com_commit和com_ro ...
- Ubuntu安装时怎样分区
1./swap交换分区,一般为你机器内存的两倍.少于这个容量.系统无法进入休眠. 实质是硬盘上的交换空间而非分区.所以没有格式,默认休眠将数据储存于此 能够取消(如不用swap必须再设定方可休眠)-- ...
- 客户端代码压缩成zip和服务器开启gzip
1.我说的zip是打包完的js代码,用压缩工具压缩为zip文件,这样放CDN上,下载量会进一步缩小,提高进入游戏的速度 嗯,需要在游戏页用js解压zip文件 2.最简单的就服务器开启gzip
- PHP获取站点根目录
http://rmingwang.com/php-access-to-the-site-root-directory.html php绝对路径与相对路径详解完整版 http://www.phpthin ...
- oracle-db安装
在LINUX平台上手动创建多个实例(oracle11g) http://blog.csdn.net/sunchenglu7/article/details/39676659 安装完桌面与数据库软件后, ...
- mysql创建部分索引
mysql中,字符串如何建立索引的(本文中截取一部分) 只对字符串的前几个字符进行索引.通过字符串的前几个字符我们已经能大概排序字符串了,剩下不能排序的可以通过遍历进行查找啊,这样只在B+树中存储字符 ...
- 使用 Travis 进行持续集成
廖雪峰教程:https://www.liaoxuefeng.com/article/0014631488240837e3633d3d180476cb684ba7c10fda6f6000
- js 去除字符串第一位逗号的方法
<script type="text/javascript"> var s=',123456'; if (s.substr(0,1)==',') s=s.substr( ...