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 ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...
随机推荐
- skearn/pandas
转: http://www.cnblogs.com/jasonfreak/p/5448385.html 1 特征工程是什么?2 数据预处理 2.1 无量纲化 2.1.1 标准化 2.1.2 区间缩放法 ...
- 实验吧—Web——WP之 what a fuck!这是什么鬼东西?
打开链接——> 发现是一大堆符号,可能有些人见过这些样子的,这是一种编码方式,叫:jother编码 jother编码是一种运用于javasscript语言中利用少量字符构造精简的匿名函数方法,对 ...
- Go Example--协程
package main import "fmt" func main() { //main gorouting中调用f函数 f("direct") //重新建 ...
- POI事件模型处理execl导入功能(只支持07版本的execl)
由于通过new XSSFWorkbook 这种方式导入导致生产环境端口宕机.通过dump文件和javacore文件分析是导入功能导致的.解决办法:自己通过网上写的工具类,不知道是否存在bug. pac ...
- 移除元素(remove,remove_if...unique...)
remove 因为本算法作用的是iterator,所以并不会改变Container大小,会返回一个新的iterator new_last,是的first到new_last中的元素都不等于value,左 ...
- MySQL联结查询和组合查询
联结查询 1.关系表 主键:一列或一组列,能够唯一区分表中的每一行,用来表示一个特定的行 外键:为某个表中的一列,包含另一个表的主键,定义量表的关系. 2.创建联结 规定要连接的表和他们如何关联即可 ...
- 原码，反码，补码，及Java中数字表示方法
原码:原码是符号位加上真值的绝对值, 即用第一位表示符号, 其余位表示值. 如:如果是八位二进制1即用00000001表示,-1即用10000001表示. 反码:正数的反码就是其本身,负数的反码是在其 ...
- ML（7）——支持向量机1（构建支持向量机）
支持向量机缩写是SVM(support vaector machine),这里的“机(machine)”是一个算法.在机器学习领域,常把一些算法看做是一个机器,如感知机(也叫感知器).支持向量机本身是 ...
- 转-[WebServer] Windows操作系统下 Tomcat 服务器运行 PHP 的环境配置
原文 前言: 由于本人在开发和学习过程中需要同时部署 JavaWeb 和 PHP 项目,于是整理了网上的一些相关资料,并结合自己的实际操作,记录于此,以供参考. 一.环境(64bit): 1.操作系统 ...
- 应用端连接MySQL数据库报Communications link failure
事情的起因: 某项目的开发同学突然Q我们组的某同学,要求我们调整MySQL的连接等待超时参数wait_timeout.要求我们从28800s调整到31536000s(也就是一年) 应用端测试环境的to ...