你真的懂offset与scroll吗?
背景
身为一个前端工程师,每次在做关于滚动或者定位之类的交互时,或多或少都会用到offset、scroll之类的元素属性值来计算距离,但是每次都是现用现百度,从来没有真正系统地弄明白其中的原理及用法;在马上十一国庆假期以及项目压力较小的情况下,特作此篇总结以弥补相关知识的缺失
offset相关
以offset开头的属性有5个,分别是:offsetParent
、offsetWidth
、offsetHeight
、offsetTop
以及offsetLeft
,下面我们来一一了解它们
1.offsetParent
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>offsetParent</title>
<style> </style>
</head>
<body>
<!--1.除了浏览器默认的,我们没有设置任何样式-->
<div id="outer">
<div id="inner">
我是div
</div>
</div>
<script>
// 2.我们看看id="inner"元素的offsetParent是哪一个
var inner = document.getElementById('inner')
console.log(inner.offsetParent)
</script>
</body>
</html>
运行结果
从控制台我们得到inner的offsetParent是body元素,那么就有问题了“inner的父元素是outer啊,但为什么offsetParent不是它?”,那是因为元素的offsetParent是距离它最近的一个具有定位的父辈元素,这里“具有定位”4个字很重要,如果你怀疑这个结论,那我们就再往下看
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>offsetParent</title>
<style>
/*这里我们给outer一个相对定位*/
#outer {
position: relative;
}
</style>
</head>
<body>
<!--1.除了浏览器默认的,我们没有设置任何样式-->
<div id="outer">
<div id="inner">
我是div
</div>
</div>
<script>
// 2.我们看看id="inner"元素的offsetParent是哪一个
var inner = document.getElementById('inner')
console.log(inner.offsetParent)
</script>
</body>
</html>
看出不同了吗,outer有了相对定位,结果呢?
运行结果
很明显,inner在一层层向上查找时,找到outer的时候,发现outer有定位(inner不管outer具体是什么定位,只要有定位就好,除了position: static
),那么关于element.offsetParent
,我们可以有以下结论“元素的offsetParent是距离该元素最近的且具有定位的父辈元素,如果没有符合条件的父辈元素,那么body就是它的offsetParent”
2.offsetWidth与offsetHeight
以offsetWidth为例,offsetWidth=width+padding*2+border*2+[横向滚动条width]
,这里滚动条的高度是否计算在offsetWidth内,各浏览器在具体实现上存在差异,例如chrome就没有将它计算在内;说到这,何为offsetWidth与offsetHeight?不着急,看看下面的代码示例
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>offsetWidth</title>
<style>
#outer {
position: relative;
width: 360px;
height: 300px;
padding: 40px; overflow: scroll;
border: 20px solid #ff552e;
}
</style>
</head>
<body>
<div id="outer">
我是outer
</div>
<script>
var outer = document.getElementById('outer') console.log('offsetWidth:' + outer.offsetWidth)
</script>
</body>
</html>
运行结果
可以注意到,我们设置outer的width是360px,但在页面中,outer的实际宽度是480px,这是因为offsetWidth是元素的布局宽度,而非样式宽度,即当元素真正渲染到页面后的宽度,我们在屏幕上看到的这个宽度就是width+padding*2+border*2
后的结果值,所以,关于offsetWidth的结论是:“offsetWidth是元素渲染到页面后的实际宽度尺寸,同理,offsetHeight就是元素渲染到页面后的实际高度尺寸”
3.offsetTop与offsetLeft
关于这两个属性,我想聪明的小伙伴已经猜到了,它们就是“元素与它的offsetParent的上边界与左边界的距离”
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>offsetTop&offsetLeft</title>
<style>
#outer {
position: relative;
width: 360px;
height: 300px;
/*使用padding让outer与inner产生距离*/
padding-top: 20px;
padding-left: 10px; border: 1px solid #666;
}
#inner {
height: 100px;
border: 1px solid #ff552e;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
我是inner
</div>
</div>
<script>
var inner = document.getElementById('inner') console.log('offsetTop:' + inner.offsetTop)
console.log('offsetLeft:' + inner.offsetLeft)
</script>
</body>
</html>
运行结果
那么我们再扩展一下,如果outer不具有定位呢,offsetTop与offsetLeft会是什么?当然是inner距离body的上边界与左边界的值了
scroll相关
1.scrollWidth
一个元素要想在scrollWidth有值,那么它要满足至少以下两点:
1.元素要有宽度,并且宽度是生效的(如果你给一个行内元素设置width,宽度是不生效的)
2.元素的内部要有一个子元素,或者文本;子元素的width要大于该元素;如果是文本,那么文本在不换行的情况下要超出该元素的水平边界。
总结一句就是:元素必须是可滚动的
看下面示例:
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>scrollWidth</title>
<style>
#outer {
position: relative;
/*注意此处的值*/
width: 360px;
height: 300px; overflow: scroll;
border: 1px solid #666;
}
#inner {
/*注意此处的值*/
width: 600px;
height: 100px; /*padding: 10px;*/
border: 1px solid #ff552e;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
我是inner
</div>
</div>
<script>
var outer = document.getElementById('outer') console.log('scrollWidth:' + outer.scrollWidth)
</script>
</body>
</html>
运行结果
细心的童鞋注意到outer.scrollWidth不等于outer的宽度,而且inner的宽度,更准确的说是inner.offsetWidth,不信你可以把inner的padding注释打开看看O(∩_∩)O哈!
2.scrollHeight
同上,原理相同
3.scrollTop&scrollLeft
scrollTop与scrollLeft就是当可滚动的元素发生滚动时,里面的子元素分别从上边界和左边界出去了多少距离
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>scrollTop&scrollLeft</title>
<style>
#outer {
position: relative;
width: 360px;
height: 300px; overflow: scroll;
border: 1px solid #666;
}
#inner {
/*inner的宽高都大于outer,所以outer水平垂直滚动条都会出现*/
width: 600px;
height: 600px; padding: 10px;
border: 1px solid #ff552e;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
我是inner
</div>
</div>
<script>
var outer = document.getElementById('outer') // 未滚动
console.log('未滚动')
console.log('scrollTop:' + outer.scrollTop)
console.log('scrollLeft:' + outer.scrollLeft) // 手动滚动,然后再次输出scrollTop
setTimeout(function () {
console.log('已滚动')
console.log('scrollTop:' + outer.scrollTop)
console.log('scrollLeft:' + outer.scrollLeft)
}, 2000)
</script>
</body>
</html>
运行结果
结语
以上就是关于offset和scroll的总结,知识点并不深,但却可以对相关知识加深理解,如有错误之处,欢迎指正
你真的懂offset与scroll吗?的更多相关文章
- 你真的懂Redis的5种基本数据结构吗?
摘要: 你真的懂Redis的5种基本数据结构吗?这些知识点或许你还需要看看. 本文分享自华为云社区<你真的懂Redis的5种基本数据结构吗?这些知识点或许你还需要看看>,作者:李子捌. 一 ...
- [C#] C# 知识回顾 - 你真的懂异常(Exception)吗?
你真的懂异常(Exception)吗? 目录 异常介绍 异常的特点 怎样使用异常 处理异常的 try-catch-finally 捕获异常的 Catch 块 释放资源的 Finally 块 一.异常介 ...
- JavaScript中的 offset, client,scroll
在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...
- offset/client/scroll一些总结
offset/client/scroll一些总结 1.offset 首先offset共有五个值 1.offsetParent 2.offsetTop 3.offsetLeft 4.offsetWidt ...
- 【转】was mutated while being enumerated 你是不是以为你真的懂For...in... ??
原文网址:http://www.jianshu.com/p/ad80d9443a92 支持原创,如需转载, 请注明出处你是不是以为你真的懂For...in... ??哈哈哈哈, 我也碰到了这个报错 . ...
- javascript中常用坐标属性offset、scroll、client
原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. ...
- javascript的语法作用域你真的懂了吗
原文:javascript的语法作用域你真的懂了吗 有段时间没有更新了,思绪一下子有点转不过来.正应了一句古话“一天不读书,无人看得出:一周不读书,开始会爆粗:一月不读书,智商输给猪.”.再加上周五晚 ...
- 你真的懂ajax吗?
前言 总括: 本文讲解了ajax的历史,工作原理以及优缺点,对XMLHttpRequest对象进行了详细的讲解,并使用原生js实现了一个ajax对象以方便日常开始使用. damonare的ajax库: ...
- “三次握手,四次挥手”你真的懂吗?TCP
“三次握手,四次挥手”你真的懂吗? mp.weixin.qq.com 来源:码农桃花源 解读:“拼多多”被薅的问题出在哪儿?损失将如何买单? 之前有推过一篇不错的干货<TCP之三次握手四次挥手 ...
随机推荐
- 我的Java设计模式-工厂方法模式
女朋友dodo闹脾气,气势汹汹的说"我要吃雪糕".笔者心里啊乐滋滋的,一支雪糕就能哄回来,不亦乐乎?! 但是,雪糕买回来了,她竟然说"不想吃雪糕了,突然想吃披萨" ...
- java 面向对象 1
目录 一.面向过程的思想和面向对象的思想 二.简单理解面向对象 三.面向对象的设计思想 四.对象和类的概念 五.如何抽象出一个类? 六.类(对象)之间的关系 七.Java与面向对象 八.为什么使用面向 ...
- oracle 数据库管理--管理表空间和数据文件
一.概念表空间是数据库的逻辑组成部分.从物理上讲,数据库数据存放在数据文件中:从逻辑上讲,数据库数据则是存放在表空间中,表空间由一个或多个数据文件组成. 二.数据库的逻辑结构oracle中逻辑结构包括 ...
- Akka(27): Stream:Use case-Connecting Slick-dbStream & Scalaz-stream-fs2
在以前的博文中我们介绍了Slick,它是一种FRM(Functional Relation Mapper).有别于ORM,FRM的特点是函数式的语法可以支持灵活的对象组合(Query Composit ...
- AF_INET
AF_INET(又称PF_INET)是 IPv4 网络协议的套接字类型,AF_INET6 则是 IPv6 的:而AF_UNIX 则是Unix系统本地通信. 选择AF_INET 的目的就是使用IPv4 ...
- JS数字金额转换为货币汉字形式
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- GBDT(MART)概念简介
GBDT(Gradient Boosting Decision Tree) 又叫 MART(Multiple Additive Regression Tree),是一种用于回归的机器学习算法,该算法由 ...
- pycharm(windows)安装及其设置中文菜单
pycharm(windows)安装及其设置中文菜单 1.下载 在官网(http://www.jetbrains.com/pycharm/download/#section=windows)进行下载 ...
- HDU1411 欧拉四面体
用向量解决: 三角形面积:S=1/2*|x1*y2-x2*y1|; (粗体表示向量) 三棱锥体积:V=1/6*(OA*OB)*OC 不知道哪里去找的代码,毕竟很线性代数矩阵什么的很头疼,晚上 ...
- 关于如何绑定Jquery 的scroll事件(兼容浏览器 Wookmark瀑布流插件)
做一个随屏幕滚动的导航条时,发现一个问题: 火狐.谷歌.ie9正常,ie8.7.6页面滚动时,导航条没有反应. 代码如下: $(document).bind("scroll",fu ...