快捷導(dǎo)航

三劍客：offset、client和scroll還傻傻分不清？

更新時(shí)間：2020年12月04日 10:36:39 作者：沐源山

這篇文章主要給大家介紹了三劍客：offset，client和scroll的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

01 offset - 偏移量

定義：元素在屏幕上占用的所有的可見(jiàn)的空間。

元素可見(jiàn)的大小由其高度、寬度決定，包括所有內(nèi)邊距，滾動(dòng)條和邊框大小四個(gè)屬性

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,元素的高度，水平滾動(dòng)條的高度 + 上邊框高度

offsetWidth:

元素在垂直方向上占用的大小空間，px,元素的寬度，垂直滾動(dòng)條的寬度，左右邊框的寬度

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

offsetWidth,offsetHeight

offsetLeft:

元素的左外邊框至包含元素的左內(nèi)邊框之間的像素距離

offsetTop

元素的上外邊框至包含元素的上內(nèi)邊框之間的像素距離

offsetParent:

offsetLeft與offsetTop屬性與包含元素有關(guān)，包含元素的引用保存在offsetParent屬性中

offsetParent屬性不一定與parentNode的值相等其實(shí)就是看看父元素們是否都有position：定位屬性

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

當(dāng)我們?nèi)バ薷哪骋粋€(gè)父元素的position的時(shí)候發(fā)生了這樣的變化

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

offsetLeft與offsetTop的值不一樣了

這樣我們就可以封裝成一個(gè)方法，一直到獲取最頂層的距離

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 客戶區(qū) client

client

元素的客戶區(qū)大?。╟lient dimension）指的是元素內(nèi)容及其內(nèi)邊距所占距的空間大小

clientWidth:

元素內(nèi)容區(qū)寬度 + 左右內(nèi)邊距寬度

clientHeight：

元素內(nèi)容區(qū)高度 + 山下內(nèi)邊距高度

我們可以用來(lái)獲取瀏覽器視口大小代碼如下

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

03 scroll 滾動(dòng)條的大小

我們一般看到的默認(rèn)滾動(dòng)條的寬度是17px；

滾動(dòng)大?。褐傅氖前瑵L動(dòng)內(nèi)容的元素的大小

scroll

scrollHeight: 在沒(méi)有滾動(dòng)條的情況下，元素內(nèi)容的總高度

scrollWidth：在沒(méi)有滾動(dòng)條的情況下，元素內(nèi)容的總寬度

HTML部分

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

JS打?。?/p>

console.log(son.scrollHeight);

此時(shí)返回的結(jié)果是120 在沒(méi)有滾動(dòng)條的情況下（子元素內(nèi)容未超出的情況）

內(nèi)容超出的情況

HTML部分

<div class="grand">
  <div class="father">
   <div class="son">
（備注：以下內(nèi)容為亂打測(cè)試內(nèi)容）
    四大皆空來(lái)得及啊電視機(jī)卡十九大達(dá)科技的薩克
    可視對(duì)講阿克蘇進(jìn)度款垃圾的卡死了的健康垃圾
    肯德基卡薩階段啦科技的卡拉膠打開(kāi)鏈接的垃圾
    打卡大抗裂砂漿打卡機(jī)打卡機(jī)的刷卡機(jī)的拉家?guī)?
    口殺戮空間打卡機(jī)的阿克蘇交大老師就打開(kāi)打開(kāi)
   </div>
  </div>
 </div>

JS部分：

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

//在子元素內(nèi)容超出的情況下

scrollLeft: 被隱藏在內(nèi)容區(qū)域左側(cè)的像素值，通過(guò)設(shè)置這個(gè)屬性可以改變?cè)氐臐L動(dòng)位置

scrollTop：被隱藏在內(nèi)容區(qū)域上方的像素值，通過(guò)這個(gè)屬性可以改變?cè)氐臐L動(dòng)位置

scrollWidth和scrollHeight主要用于確定元素內(nèi)容的實(shí)際大小

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

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

以上就是我們的‘三劍客'啦，不用再傻傻分不清啦！

參考資料：《高級(jí)語(yǔ)言程序設(shè)計(jì)》

到此這篇關(guān)于三劍客：offset，client和scroll的文章就介紹到這了,更多相關(guān)offset，client和scroll內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: