背景

身为一个前端工程师,每次在做关于滚动或者定位之类的交互时,或多或少都会用到offset、scroll之类的元素属性值来计算距离,但是每次都是现用现百度,从来没有真正系统地弄明白其中的原理及用法;在马上十一国庆假期以及项目压力较小的情况下,特作此篇总结以弥补相关知识的缺失

offset相关

以offset开头的属性有5个,分别是:offsetParentoffsetWidthoffsetHeightoffsetTop以及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的总结,知识点并不深,但却可以对相关知识加深理解,如有错误之处,欢迎指正

原文地址:https://kittyslave.github.io/2017/09/29/%E4%BD%A0%E7%9C%9F%E7%9A%84%E6%87%82offset%E4%B8%8Escroll%E5%90%97%EF%BC%9F/

你真的懂offset与scroll吗?的更多相关文章

  1. 你真的懂Redis的5种基本数据结构吗?

    摘要: 你真的懂Redis的5种基本数据结构吗?这些知识点或许你还需要看看. 本文分享自华为云社区<你真的懂Redis的5种基本数据结构吗?这些知识点或许你还需要看看>,作者:李子捌. 一 ...

  2. [C#] C# 知识回顾 - 你真的懂异常(Exception)吗?

    你真的懂异常(Exception)吗? 目录 异常介绍 异常的特点 怎样使用异常 处理异常的 try-catch-finally 捕获异常的 Catch 块 释放资源的 Finally 块 一.异常介 ...

  3. JavaScript中的 offset, client,scroll

    在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...

  4. offset/client/scroll一些总结

    offset/client/scroll一些总结 1.offset 首先offset共有五个值 1.offsetParent 2.offsetTop 3.offsetLeft 4.offsetWidt ...

  5. 【转】was mutated while being enumerated 你是不是以为你真的懂For...in... ??

    原文网址:http://www.jianshu.com/p/ad80d9443a92 支持原创,如需转载, 请注明出处你是不是以为你真的懂For...in... ??哈哈哈哈, 我也碰到了这个报错 . ...

  6. javascript中常用坐标属性offset、scroll、client

    原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. ...

  7. javascript的语法作用域你真的懂了吗

    原文:javascript的语法作用域你真的懂了吗 有段时间没有更新了,思绪一下子有点转不过来.正应了一句古话“一天不读书,无人看得出:一周不读书,开始会爆粗:一月不读书,智商输给猪.”.再加上周五晚 ...

  8. 你真的懂ajax吗?

    前言 总括: 本文讲解了ajax的历史,工作原理以及优缺点,对XMLHttpRequest对象进行了详细的讲解,并使用原生js实现了一个ajax对象以方便日常开始使用. damonare的ajax库: ...

  9. “三次握手,四次挥手”你真的懂吗?TCP

    “三次握手,四次挥手”你真的懂吗?  mp.weixin.qq.com 来源:码农桃花源 解读:“拼多多”被薅的问题出在哪儿?损失将如何买单? 之前有推过一篇不错的干货<TCP之三次握手四次挥手 ...

随机推荐

  1. 我的Java设计模式-工厂方法模式

    女朋友dodo闹脾气,气势汹汹的说"我要吃雪糕".笔者心里啊乐滋滋的,一支雪糕就能哄回来,不亦乐乎?! 但是,雪糕买回来了,她竟然说"不想吃雪糕了,突然想吃披萨" ...

  2. java 面向对象 1

    目录 一.面向过程的思想和面向对象的思想 二.简单理解面向对象 三.面向对象的设计思想 四.对象和类的概念 五.如何抽象出一个类? 六.类(对象)之间的关系 七.Java与面向对象 八.为什么使用面向 ...

  3. oracle 数据库管理--管理表空间和数据文件

    一.概念表空间是数据库的逻辑组成部分.从物理上讲,数据库数据存放在数据文件中:从逻辑上讲,数据库数据则是存放在表空间中,表空间由一个或多个数据文件组成. 二.数据库的逻辑结构oracle中逻辑结构包括 ...

  4. Akka(27): Stream:Use case-Connecting Slick-dbStream & Scalaz-stream-fs2

    在以前的博文中我们介绍了Slick,它是一种FRM(Functional Relation Mapper).有别于ORM,FRM的特点是函数式的语法可以支持灵活的对象组合(Query Composit ...

  5. AF_INET

    AF_INET(又称PF_INET)是 IPv4 网络协议的套接字类型,AF_INET6 则是 IPv6 的:而AF_UNIX 则是Unix系统本地通信. 选择AF_INET 的目的就是使用IPv4 ...

  6. JS数字金额转换为货币汉字形式

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  7. GBDT(MART)概念简介

    GBDT(Gradient Boosting Decision Tree) 又叫 MART(Multiple Additive Regression Tree),是一种用于回归的机器学习算法,该算法由 ...

  8. pycharm(windows)安装及其设置中文菜单

    pycharm(windows)安装及其设置中文菜单 1.下载 在官网(http://www.jetbrains.com/pycharm/download/#section=windows)进行下载 ...

  9. HDU1411 欧拉四面体

    用向量解决: 三角形面积:S=1/2*|x1*y2-x2*y1|;      (粗体表示向量) 三棱锥体积:V=1/6*(OA*OB)*OC 不知道哪里去找的代码,毕竟很线性代数矩阵什么的很头疼,晚上 ...

  10. 关于如何绑定Jquery 的scroll事件(兼容浏览器 Wookmark瀑布流插件)

    做一个随屏幕滚动的导航条时,发现一个问题: 火狐.谷歌.ie9正常,ie8.7.6页面滚动时,导航条没有反应. 代码如下: $(document).bind("scroll",fu ...