浅谈JS各种宽高（clientHeight、scrollHeight、offsetHeight等）

【前言】

简单总结下JS常见的宽高获取方法，例如clientHeight、scrollHeight、offsetHeight等。

先简单看个案例demo，效果图如下：

【主体】

一、宽高

（1）clientHeight、clientWidth→元素宽高（height+padding，不包含边框），可以理解为元素可视区域高度

（2）offsetHeight、offectWidth→元素宽高（height+padding+border，包含边框），可以理解为元素的可视高度

（3）scrollHeight、scrollWidth→元素宽高（内容的实际高度+上下padding<如果没有限制div的height，即height是自适应的，那么scrollHeight=clientHeight>）

（4）scrollHeight与offsetHeight的区别？

offsetHeight即是自身的高度，scrollHeight是自身的高度+隐藏元素的高度（即是内层元素的offsetHeight）

二、滚动距离

（1） offsetTop：为容器相对于document的top的绝对偏移---→等于top+margin-top

同理offsetLeft：容器相对于document的left的绝对偏移---→等于left+margin-left

（2）clientTop: 容器内部相对于容器本身的top偏移，实际就是border-width

（3）scrollTop: Y轴的滚动条没有，或滚到最上时是0；Y轴的滚动条滚到最下时是 scrollHeight-clientHeight。滚动时通常只能scrollTop，当scrollTop为 0 到 scrollHeight-clientHeight 是正常的滚动距离，否则就是滚动过头了（手机上的阻尼效果）。

浅谈JS各种宽高（clientHeight、scrollHeight、offsetHeight等）相关推荐

浅谈mysql主从复制的高可用解决方案
1.熟悉几个组件(部分摘自网络) 1.1.drbd -- DRBD(Distributed Replicated Block Device),DRBD号称是 "网络 RAID&qu ...
浅谈 js 数字格式类型
原文:浅谈 js 数字格式类型很多人也许只知道 123,123.456,0xff 之类的数字格式. 其实 js 格式还有很多数字格式类型,比如 1., .1 这样的,也有 .1e2 这样的. 可能有 ...
php字面量,浅谈js之字面量、对象字面量的访问、关键字in的用法
一:字面量含义字面量表示如何表达这个值,一般除去表达式,给变量赋值时,等号右边都可以认为是字面量. 字面量分为字符串字面量(string literal ).数组字面量(array literal) ...
浅谈JS中常见的问题（三）
往期文章目录浅谈JS中常见的问题(一) 浅谈JS中常见的问题(二) JS知识总结往期文章目录前言 11. 同步和异步的区别 12. JS 判断变量类型的几种方法 13. 如何阻止事件冒泡与默认事 ...
这该死的高度,height,clientHeight,scrollHeight,offsetHeight
引言: 虽然有时候界面的设置不是我们这些后台代码人员的工作,但是有时候却难以理解控件生成时的一些怪事,比方在学习webabcd的扩张GridView中固定列时,你或许已经被其中的height,clie ...
clientHeight , scrollHeight , offsetHeight之间的区别及兼容方案
clientHeight , scrollHeight , offsetHeight相信每个人都用过,可是每次用都要查一下到底哪个是文档大小哪个是视口大小,还有头疼的兼容问题. 先来官方的了解一下这三 ...
浅谈千万级高性能高并发网站架构
浅谈千万级PV/IP规模高性能高并发网站架构高并发访问的核心原则其实就一句话"把所有的用户访问请求都尽量往前推". 如果把来访用户比作来犯的"敌人",我们一定 ...
原生js获取宽高与jquery获取宽高的方法的关系
说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况. 2.以下所说的所有方法与属性所返回的值都是不带单位的. 3.为了方便说明,以下情况采用缩写表示: obj -> ...
浅谈js原型和原型链
一.简述对于javascript 对象(函数) 原型和原型链的理解,其实不那么难,简单来说,需要理解什么是原型,怎么访问原型,什么是原型链,怎么通过原型链去访问原型,就可以大概理清楚原型和原型链的基 ...
js改变宽高字体大小透明度多物体模块运动
改变宽高字体大小透明度 #div1 { width: 100px; height: 100px; background: red; margin: 10px; filter:alpha(opactiy ...

浅谈JS各种宽高（clientHeight、scrollHeight、offsetHeight等）

浅谈JS各种宽高（clientHeight、scrollHeight、offsetHeight等）相关推荐

最新文章

热门文章