成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Javascript零碎之各種寬高屬性及應(yīng)用

DevYK / 3596人閱讀

摘要：一掛在上的上最常用的只有其中，永遠(yuǎn)都是窗口的大小，跟隨窗口變化而變化。這個(gè)是距該元素最近的不為的祖先元素，如果沒(méi)有則指向元素。

在Javascript的開發(fā)過(guò)程中，我們總會(huì)看到類似如下的邊界條件判斷(懶加載)：

const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;    
const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
const innerHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight 
   
if( scrollTop +innerHeight >= scrollHeight + 50) {
  console.log("滾動(dòng)到底了!")
}

這些獲取滾動(dòng)狀態(tài)的屬性，可能我們咋一看能夠理解，不過(guò)時(shí)間久了立馬又忘記了。這是因?yàn)檫@些獲取各種寬高的屬性api及其的多，而且?guī)缀醵即嬖诩嫒菪詫懛?。一方面很難記，更重要的是不好理解。下面通過(guò)選取常用的幾個(gè)來(lái)講述下具體api的區(qū)別。

## 一 掛在window上的

window上最常用的只有window.innerWidth/window.innerHeight、window.pageXOffset/window.pageYOffset.

其中，window.innerWidth/windw.innerHeight永遠(yuǎn)都是窗口的大小，跟隨窗口變化而變化。window.pageXOffset/window.pageYOffset是IE9+瀏覽器獲取滾動(dòng)距離的，實(shí)質(zhì)跟document.documentElement/document.body上的scrollTop/scrollLeft功能一致，所以日常都使用兼容寫法:

const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
pageYOffset 屬性實(shí)質(zhì)是 window.scrollY 屬性的別名，pageXOffset同理，為了跨瀏覽器兼容，一般用后者（pageYOffset、pageXOffset）。
二 掛在document上的 1 clientWidth/clientHeight:元素內(nèi)部的寬高.

記住公式:

clientWidth/clientHeight = padding + content寬高 - scrollbar寬高(如有滾動(dòng)條)
2 offsetWidth/offsetHeight

個(gè)人覺(jué)得這個(gè)名字有點(diǎn)誤導(dǎo)人，壓根沒(méi)有偏移的意思，記住公式即可:

offsetWidth/offsetHeight = clientWidth/clientHeight(padding + content) + border + scrollbar

由上述公式，可以得到第一個(gè)示例，即"獲取滾動(dòng)條的寬度(scrollbar)":

const el = document.querySelect(".box")
const style = getComputedStyle(el, flase)//獲取樣式
const clientWidth = el.clientWidth, offsetWidth = el.offsetWidth
//parseFloat("10px", 10) => 10
const borderWidth = parseFloat(style.borderLeftWidth, 10) + parseFloat(style.borderRightWidth, 10)
const scrollbarW = offsetWidth - clientWidth - borderWidth
3 offsetTop/offsetLeft

這兩個(gè)才是真的意如其名，指的是元素上側(cè)或者左側(cè)偏移它的offsetParent的距離。這個(gè)offsetParent是距該元素最近的position不為static的祖先元素，如果沒(méi)有則指向body元素。說(shuō)白了就是:"元素div往外找到最近的position不為static的元素，然后該div的邊界到它的距離"。
由此，可以得到第二個(gè)示例，即"獲得任一元素在頁(yè)面中的位置":

const getPosition = (el) => {
    let left = 0, top = 0;

    while(el.offsetParent) {
        //獲取偏移父元素的樣式,在計(jì)算偏移的時(shí)候需要加上它的border
        const pStyle = getComputedStyle(el.offsetParent, false);
        left += el.offsetLeft + parseFloat(pStyle.borderLeftWidth, 10);
        top += el.offsetTop + parseFloat(pStyle.borderTopWidth, 10);
        el = el.offsetParent;
    }

    return { left, top }
}

那么，offsetLeft和style.left有什么區(qū)別呢？

offsetLeft 只讀，可以返回沒(méi)有定位盒子的距離左側(cè)的位置，值為number,例100。

style.left 可讀可寫，但是讀取時(shí)前提是設(shè)置過(guò)left，值為字符串，例:"100px"

所以，一般通用用法是：“用offsetLeft 和 offsetTop 獲取值，用style.left 和 style.top 賦值”

綜上，結(jié)合getBoundingClientRect()得到綜合示例"元素是否在可視區(qū)域":

function isElemInViewport(el) {
    const rt = el.getBoundingClientRect();

    return (
        rt.top >=0 &&
        rt.left >= 0 &&
        rt.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rt.right <= (window.innerWidth || document.documentElement.clientWidth)
    )
}

其中，getBoundingClientRect用于獲得頁(yè)面中某個(gè)元素的左，上，右和下分別相對(duì)瀏覽器視窗的位置:

三 掛在event上的

event上面的相對(duì)距離一般是鼠標(biāo)點(diǎn)擊或者移動(dòng)端觸控事件獲取的。

1 clientX clientY

鼠標(biāo)或者觸控點(diǎn)相對(duì)于可視窗口左上角為原點(diǎn)x軸和y軸的距離:

2 offsetX offsetY

鼠標(biāo)或者觸控點(diǎn)相對(duì)于元素本身寬高左上角為原點(diǎn)x軸和y軸的距離:

3 screenX screenY

鼠標(biāo)或者觸控點(diǎn)相對(duì)于屏幕顯示器左上角為原點(diǎn)x軸和y軸的距離:

4 pageX pageY

鼠標(biāo)或者觸控點(diǎn)相對(duì)于頁(yè)面內(nèi)容左上角為原點(diǎn)x軸和y軸的距離:

需要注意的是，這兩個(gè)屬性存在兼容性問(wèn)題:

pageX = event.pageX || event.x; //IE
pageY = event.pageY || event.y; //IE
本文收錄在個(gè)人的Github上https://github.com/kekobin/bl... ,覺(jué)得有幫助的，歡迎start哈。支持原創(chuàng)，未經(jīng)本人同意，請(qǐng)勿轉(zhuǎn)載！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/105101.html

相關(guān)文章

  • CSS零碎之em、rem

    摘要：移動(dòng)端的開發(fā)基本很少直接使用作為單位了，目前最常用的是。一般移動(dòng)端頁(yè)面的開發(fā)流程是設(shè)計(jì)人員以某個(gè)機(jī)型作為標(biāo)準(zhǔn)，設(shè)計(jì)好。前端開發(fā)針對(duì)這個(gè)機(jī)型的做開發(fā)，然后其它機(jī)型相對(duì)的去等比例縮放。 移動(dòng)端的開發(fā)基本很少直接使用px作為單位了，目前最常用的是rem。不過(guò)在這之前其實(shí)還有個(gè)em單位，和rem長(zhǎng)得非常的像，那么它們有什么區(qū)別呢？又有什么不一樣的適用場(chǎng)景呢？ 注意：無(wú)論使用em，還是rem，客...

    Faremax 評(píng)論0 收藏0

  • CSS零碎之em、rem

    摘要：移動(dòng)端的開發(fā)基本很少直接使用作為單位了，目前最常用的是。一般移動(dòng)端頁(yè)面的開發(fā)流程是設(shè)計(jì)人員以某個(gè)機(jī)型作為標(biāo)準(zhǔn)，設(shè)計(jì)好。前端開發(fā)針對(duì)這個(gè)機(jī)型的做開發(fā)，然后其它機(jī)型相對(duì)的去等比例縮放。 移動(dòng)端的開發(fā)基本很少直接使用px作為單位了，目前最常用的是rem。不過(guò)在這之前其實(shí)還有個(gè)em單位，和rem長(zhǎng)得非常的像，那么它們有什么區(qū)別呢？又有什么不一樣的適用場(chǎng)景呢？ 注意：無(wú)論使用em，還是rem，客...

    Integ 評(píng)論0 收藏0

  • Javascript零碎之IntersectionObserver

    摘要：主要用于元素可見性的監(jiān)聽，比傳統(tǒng)通過(guò)全局監(jiān)聽事件去判斷可見性無(wú)論是性能還是便利性都要好得多。問(wèn)題是這種通過(guò)監(jiān)聽的方式很容易導(dǎo)致性能問(wèn)題，或者多多少少會(huì)有些性能損失。 IntersectionObserver主要用于元素可見性的監(jiān)聽，比傳統(tǒng)通過(guò)全局監(jiān)聽scroll事件去判斷可見性無(wú)論是性能還是便利性都要好得多。因?yàn)閍pi比較新，存在兼容性問(wèn)題，好在已經(jīng)有了兼容的polyfill.其基本介...

    張遷 評(píng)論0 收藏0

  • JavaScript中的各種寬高以及位置總結(jié)

    摘要：和這一對(duì)屬性是用來(lái)讀取元素的的寬度和高度的。第二部分對(duì)象在中，對(duì)于元素的運(yùn)動(dòng)的操作通常都會(huì)涉及到對(duì)象，而對(duì)象也存在很多位置屬性，且由于瀏覽器兼容性問(wèn)題會(huì)導(dǎo)致這些屬性間相互混淆，這里一一講解。文章轉(zhuǎn)自中的各種寬高以及位置總結(jié) 在javascript中操作dom節(jié)點(diǎn)讓其運(yùn)動(dòng)的時(shí)候，常常會(huì)涉及到各種寬高以及位置坐標(biāo)等概念，如果不能很好地理解這些屬性所代表的意義，就不能理解js的運(yùn)動(dòng)原理，同時(shí)...

    microelec 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<