HTML中各種 div 位置距離關(guān)系

• • 一. 盒模型圖片展示：
  • 二. 位置距離計算屬性
  • 三. 應(yīng)用場景

一. 盒模型圖片展示：

二. 位置距離計算屬性

offsetWidth, offsetHeight
獲取盒子的寬度/高度（包括盒子的border，padding和內(nèi)容width/height）,不包括外邊距

offsetLeft
獲取盒子當(dāng)前位置(左上角)距離自己最近定位的父元素左側(cè)的距離，如果沒有最近的定位的父元素，則相當(dāng)于HTML

offsetTop
獲取盒子當(dāng)前位置距離自己最近定位的父元素頂部的距離，如果沒有最近的定位的父元素，則相當(dāng)于HTML

clientWidth，clientHeight
獲取盒子的可視區(qū)域?qū)挾取⒏叨?#xff0c;包括padding在內(nèi)，不包括border，這里是不包括滾動條的情況，如果有滾動條，發(fā)現(xiàn)盒子的寬度(width)從100變成83，可知滾動條的寬度為17px，而且是占據(jù)盒子內(nèi)容的寬度，除了可視寬高，似乎其他都沒有影響。
所謂的可視區(qū)域，個人理解就是一個盒子里面，能夠展示出被人看見的內(nèi)容區(qū)域

clientLeft
獲取盒子的左邊框的寬度，可理解為可視區(qū)域和左側(cè)邊(這個左側(cè)邊不是border)之間的距離

clientTop
獲取盒子的上邊框的寬度，可理解為可視區(qū)域和上側(cè)邊(這個上側(cè)邊不是border)之間的距離

scrollWidth，scrollHeight
獲取盒子內(nèi)容里面元素占據(jù)的真正寬度、高度

scrollLeft，scrollTop
滾動條距離左側(cè)邊，上側(cè)邊的距離
滾動條的最大滾動高度為滾動高度(scrollHeight) - 盒子可視高度(clientHeight)

innerWidth，innerHeight
窗口寬度、高度，也可以理解為window窗口的可視區(qū)域?qū)挾取⒏叨?/p>

let IH = window.innerHeight // 標(biāo)準(zhǔn)模式下 if (document.documentElement) {let IH = document.documentElement.clientHeight // 怪異模式 } else {let IH = document.body.clientHeight }

clientX & clientY
鼠標(biāo)點擊或者觸屏?xí)r，點擊位置距離window可視區(qū)域左上角的(0, 0)的坐標(biāo)距離

<div @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)"></div>touchStart(e){let info = this.dropDownInfo;info.startX = e.targetTouches[0].clientX;info.startY = e.targetTouches[0].clientY;console.log(e) },

pageX & pageY
正常情況下，window的可視區(qū)域的是不變的，所以相對于可視區(qū)域的坐標(biāo)也就不會變，無論怎么點，clientX和clientY都是一樣的。但是從page就可以知道，這個是頁面坐標(biāo)，也就是點擊的頁面距離window可視區(qū)域左上角的坐標(biāo)距離。
一般可視區(qū)域是固定的，但是頁面大小就不一定是固定的，如果有滾動條，說面頁面大小超過了可視區(qū)域，這時候點擊滾動隱藏區(qū)域，pageX&pageY肯定是大于clientX&clientY

screenX & screenY
點擊的位置距離屏幕的左上角的上左距離

三. 應(yīng)用場景

swiper左右滑動切換列表的內(nèi)部嵌套slide滑塊

問題：內(nèi)部slide滑塊滑動事件與swiper左右滑動切換事件沖突，影響性能

解決辦法：監(jiān)聽滑塊滑到觸左、觸右，觸左時可觸發(fā)swiper左切換，觸右時可觸發(fā)swiper右切換，除此之外，內(nèi)部滑動阻止冒泡

<div @scroll="scrollEvent" @touchstart="touchStart($event)" @touchmove="touchMove($event)" class="slide"><div class="slide__item"></div><div class="slide__item"></div><div class="slide__item"></div> </div> data() {return {dropDownInfo: {startX: 0,startY: 0,isDropDown: false, // 是否下拉isBorder: false,},leftCanChange: true, // 靠左touch可以觸發(fā)父級swiper切換事件，默認(rèn)truerightCanChange: false, // 靠右touch可以觸發(fā)父級swiper切換事件，默認(rèn)false} }, methods: {scrollEvent(e){const slideWidth = e.target.scrollWidth; // 盒子內(nèi)容里面元素占據(jù)的真正寬度const offsetWidth = e.target.offsetWidth; // 盒子的真實寬度，不包括左右margin外邊距const scrollLeft = e.target.scrollLeft; // 滾動條滾動的寬度if (scrollLeft <= 0) {// 觸左this.leftCanChange = true} else if (scrollLeft + offsetWidth >= slideWidth) {// 觸右(滾動條可滾動的寬度 + 盒子的真實寬度 >= 盒子內(nèi)容元素的真實寬度)this.rightCanChange = true} else {this.leftCanChange = falsethis.rightCanChange = false}},/*** 觸摸開始*/touchStart(e){const info = this.dropDownInfo;info.startX = e.targetTouches[0].pageX;info.startY = e.targetTouches[0].pageY;},/*** 觸摸滑動時*/touchMove(e){let info = this.dropDownInfo;const X = e.targetTouches[0].pageX - info.startX;const disX = Math.abs(X)const disY = e.targetTouches[0].pageY - info.startY// 左右滑動且列表數(shù)據(jù)大于1，阻止冒泡觸發(fā)父級swiper切換if ((disX > disY) && this.options.length > 1) {// 除了觸左，右滑 || 觸右，左滑不阻止冒泡，防止觸發(fā)父級swiper切換if (!(this.leftCanChange && X > 0 || this.rightCanChange && X < 0)) {e.stopPropagation();}}}, } .slide{position: relative;overflow: hidden;overflow-x: auto;white-space: nowrap;-webkit-overflow-scrolling: touch;background: #f5f5f5; } .slide__item{display: inline-block;width: 6.58rem;min-height: 3rem;margin: 0 0.08rem;vertical-align: top;background: #ffffff; }

2. 監(jiān)聽元素是否在可視區(qū)

mounted() {window.addEventListener("scroll", this.handleScroll, false); }, methods: {/*** 頁面滾動*/handleScroll(e) {let el = document.getElementById("elementId"); // 需要監(jiān)聽的元素let isVideoVisible = this.$util.isElementVisible(el); } }, util.js /*** 元素是否在可視區(qū)* @param el* @returns {boolean|boolean | *}*/ function isElementVisible(el) {const rect = el.getBoundingClientRect();const vWidth = window.innerWidth || document.documentElement.clientWidth;const vHeight = window.innerHeight || document.documentElement.clientHeight;const efp = function (x, y) {return document.elementFromPoint(x, y);};if (rect.right < 0 || rect.bottom < 0|| rect.left > vWidth || rect.top > vHeight) return false;return (el.contains(efp(rect.left, rect.top))|| el.contains(efp(rect.right, rect.top))|| el.contains(efp(rect.right, rect.bottom))|| el.contains(efp(rect.left, rect.bottom))); }

以上代碼只對上下滾動監(jiān)聽有用
在一個頁面的slide左右滾動滑塊中監(jiān)聽的話要用別的方法
**getBoundingClientRect();**獲取元素距離瀏覽器周邊的位置的方法

<div @scroll="scrollEvent" class="council__slide"><divv-for="(item, index) in options":key="'list-'+ index"class="council__slide-item"></div> </div> .council__slide-box{position: relative;overflow: hidden;overflow-x: auto;white-space: nowrap;-webkit-overflow-scrolling: touch;&::-webkit-scrollbar {width: 0;height: 0;display: none;background: transparent;} } .council__slide-item{display: inline-block;width: 6.78rem;height: 3.86rem;border-radius: 0.4rem;overflow: hidden;margin: 0 0.1rem; } created () {this.throttleScroll = $util.throttle(this.pageScroll, 100); }, mounted () {}, methods: {scrollEvent(){this.throttleScroll();},pageScroll () {let el = document.getElementById('playVideo');const rectLeft = el.getBoundingClientRect(); // 獲取元素距離瀏覽器周邊的距離// if (Math.abs(rectLeft.left) >= 187) {...}}}, } <input type="text" id="inp" /><script type="text/javascript"> var box = document.getElementById( "inp" ); alert(box.getBoundingClientRect().top); alert(box.getBoundingClientRect().right); alert(box.getBoundingClientRect().bottom); alert(box.getBoundingClientRect().left); function getRect( elements ){ var rect = elements.getBoundingClientRect(); var clientTop = document.documentElement.clientTop; var clientLeft = document.documentElement.clientLeft; return { // 兼容ie多出的兩個px top : rect.top - clientTop, // 距離頂部的位置 bottom : rect.bottom - clientTop, // 距離頂部加上元素本身的高度就等于bottom的位置 left : rect.left - clientLeft, // 距離左邊的位置 right : rect.right - clientLeft // 距離右邊的位置就是 距離左邊的位置加上元素本身的寬度 }; }; </script>

如何判斷元素是否進入可視區(qū)域viewport？

總結(jié)

以上是生活随笔為你收集整理的HTML中各种 div 位置距离关系的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。