三剑客:offset、client和scroll还傻傻分不清?


Posted in Javascript onDecember 04, 2020

在学习前端的过程中,我们经常会碰到offset, client与scroll,所以我就把它们称作为‘三剑客'。

01  offset - 偏移量

定义:元素在屏幕上占用的所有的可见的空间。

元素可见的大小由其高度、宽度决定,包括所有内边距,滚动条和边框大小四个属性

三剑客:offset、client和scroll还傻傻分不清?

offset

css的样式:

<style>
 .son {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 10px solid #ccc;
 }

 .father {
  width: 140px;
  height: 140px;
  padding: 10px;
  border: 10px solid black;
 }

 .grand {
  width: 180px;
  height: 180px;
  margin: 100px;
  padding: 10px;
  border: 10px solid orange;
 }
 </style>

HTML部分:

<div class="grand">
 <div class="father">
  <div class="son"></div>
 </div>
 </div>

offsetHeight:

元素正在垂直方向上占用的大小空间,px,元素的高度,水平滚动条的高度 + 上边框高度

offsetWidth:

元素在垂直方向上占用的大小空间,px,元素的宽度,垂直滚动条的宽度,左右边框的宽度

var grand = document.getElementsByClassName('grand')[0];
 var father = document.getElementsByClassName('father')[0];
 var son = document.getElementsByClassName('son')[0];

 console.log(grand.offsetHeight); // 220
 console.log(grand.offsetWidth); // 220

三剑客:offset、client和scroll还傻傻分不清?

offsetWidth,offsetHeight

offsetLeft:

元素的左外边框至包含元素的左内边框之间的像素距离

offsetTop

元素的上外边框至包含元素的上内边框之间的像素距离

offsetParent:

offsetLeft与offsetTop属性与包含元素有关,包含元素的引用保存在offsetParent属性中

offsetParent属性不一定与parentNode的值相等其实就是看看父元素们是否都有position:定位属性

console.log(son.offsetParent); // <body></body>
console.log(son.offsetLeft); // 148 // body的8pxmargin
console.log(son.offsetTop); // 140

当我们去修改某一个父元素的position的时候发生了这样的变化

grand.style.position = 'relative';
console.log(son.offsetParent); // grand作为了包含元素
console.log(son.offsetLeft); // 30
console.log(son.offsetTop); // 30

offsetLeft与offsetTop的值不一样了

这样我们就可以封装成一个方法,一直到获取最顶层的距离

function getOffset(ele) {
 var offset = {
  top: 0,
  left: 0
 }

 while (ele.offsetParent) {
  offset.top += ele.offsetTop;
  offset.left += ele.offsetLeft;
  ele = ele.offsetParent;
  console.log(ele, offset); // grand {left: 138, top: 130}
       // body {top: 130, left: 138}
 }
 return offset;
 }
 console.log(getOffset(son)); // {top: 130, left: 138}

02  客户区  client

三剑客:offset、client和scroll还傻傻分不清?

client

元素的客户区大小(client dimension)指的是元素内容及其内边距所占距的空间大小

clientWidth:

元素内容区宽度 + 左右内边距宽度

clientHeight:

元素内容区高度 + 山下内边距高度

我们可以用来获取浏览器视口大小代码如下

function getView() {
 return {
  w: document.body.clientWidth || document.documentElement.clientWidth,
  h: document.body.clientHeight || document.documentElement.clientHeight
 }
 }

03 scroll 滚动条的大小

我们一般看到的默认滚动条的宽度是17px;

滚动大小:指的是包含滚动内容的元素的大小

三剑客:offset、client和scroll还傻傻分不清?

scroll

scrollHeight: 在没有滚动条的情况下,元素内容的总高度

scrollWidth:在没有滚动条的情况下,元素内容的总宽度

HTML部分

<body>
 <div class="grand">
 <div class="father">
  <div class="son"></div>
 </div>
 </div>
</body>

JS打印:

console.log(son.scrollHeight);

此时返回的结果是120  在没有滚动条的情况下(子元素内容未超出的情况)

内容超出的情况

HTML部分

<div class="grand">
  <div class="father">
   <div class="son">
(备注:以下内容为乱打测试内容)
    四大皆空来得及啊电视机卡十九大达科技的萨克
    可视对讲阿克苏进度款垃圾的卡死了的健康垃圾
    肯德基卡萨阶段啦科技的卡拉胶打开链接的垃圾
    打卡大抗裂砂浆打卡机打卡机的刷卡机的拉家带
    口杀戮空间打卡机的阿克苏交大老师就打开打开
   </div>
  </div>
 </div>

JS部分:

console.log(son.scrollHeight); // 409 

//在子元素内容超出的情况下

scrollLeft: 被隐藏在内容区域左侧的像素值,通过设置这个属性可以改变元素的滚动位置

scrollTop:被隐藏在内容区域上方的像素值,通过这个属性可以改变元素的滚动位置

scrollWidth和scrollHeight主要用于确定元素内容的实际大小

var docHeight = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight);

 var docWidth = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth);

以上就是我们的‘三剑客'啦,不用再傻傻分不清啦!

参考资料:《高级语言程序设计》

到此这篇关于三剑客:offset,client和scroll的文章就介绍到这了,更多相关offset,client和scroll内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
xss文件页面内容读取(解决)
Nov 28 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 Javascript
JQueryEasyUI datagrid框架的进阶使用
Apr 08 Javascript
盘点javascript 正则表达式中 中括号的【坑】
Mar 16 Javascript
AngularJS压缩JS技巧分析
Nov 08 Javascript
微信小程序之仿微信漂流瓶实例
Dec 09 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
Jan 24 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
vue 实现通过手机发送短信验证码注册功能
Apr 19 Javascript
JavaScript 接口原理与用法实例详解
May 12 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 #Javascript
HTML元素拖拽功能实现的完整实例
Dec 04 #Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 #Vue.js
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 #Vue.js
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 #Javascript
vue使用echarts图表自适应的几种解决方案
Dec 04 #Vue.js
原生JS实现拖拽效果
Dec 04 #Javascript
You might like
PHP压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
php实现图片压缩处理
2020/09/09 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
2017/11/22 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
2018/08/17 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python用字典统计单词或汉字词个数示例
2014/04/22 Python
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
python简单图片操作:打开\显示\保存图像方法介绍
2017/11/23 Python
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
Python常见的pandas用法demo示例
2019/03/16 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
《小池塘》教学反思
2014/02/28 职场文书
会计专业导师推荐信
2014/03/08 职场文书
文案策划求职信
2014/03/18 职场文书
感恩老师演讲稿600字
2014/08/28 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
外出听课学习心得体会
2016/01/15 职场文书
创业计划书之密室逃脱
2019/11/08 职场文书
k-means & DBSCAN 总结
2021/04/27 Python
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS