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 ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...
随机推荐
- Apache 启动失败没有错误信息的解决办法
在cmd命令行 进入到apache安装bin目录 执行以下 httpd.exe -w -n "apache2.2" -k start 注意apache2.2是你安装的apache服 ...
- Python逻辑运算
一.运算符种类 1.比较运算符 > ,< , >= ,<= , != , == 2.赋值运算符 =, +=,-=,*=,/=,**=,%= 3.成员运算符 in not in ...
- ubuntu设置静态ip后不能上网
加上下面的配置,然后重启 sudo vim /etc/resolvconf/resolv.conf.d/base nameserver 223.5.5.5nameserver 8.8.8.8names ...
- 【MAC】常用方法-持续更新
1.Homebrew安装 删除brew ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/ma ...
- LeetCode – Smallest Rotation with Highest Score
Given an array A, we may rotate it by a non-negative integer K so that the array becomes A[K], A[K+1 ...
- mongodb千万级写入怎么优化
从mysql数据库通过java程序导入单表1300w到mongodb,花了大概50分钟,前1000w条数据中每100w条大概要3分钟,之后的300多w条就差不多每100w条要5到6分钟,之后再从其他的 ...
- madlib centos yum 包安装
使用centos 测试安装madlib sql 机器学习类库 安装步骤 添加pg 10 repo yum install https://download.postgresql.org/pub/rep ...
- phpdocumentor安装和使用总结
为了解决一校友在安装和使用phpDocumentor过程中遇到的问题,自己闲时也折腾了一下这个东西,总结见下: 一.定义: 自己刚听到这个词时还不知道这个是什么东西,干啥用的,就去百度了一下,说道: ...
- DevExpress DateEdit控件选择精确到秒
先看看下面的效果图: 设置以下属性 dateEdit1.Properties.VistaDisplayMode = DevExpress.Utils.DefaultBoolean.True; date ...
- 【转】ImageView.ScaleType属性
原文网址:https://blog.csdn.net/Buaaroid/article/details/49360779 ImageView的Scaletype决定了图片在View上显示时的样子,如进 ...