国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

判斷元素是否有滾動(dòng)條

rose / 2268人閱讀

摘要：判斷元素是否有滾動(dòng)條因?yàn)槌霈F(xiàn)滾動(dòng)條便意味著元素空間將大于其內(nèi)容顯示區(qū)域，根據(jù)這個(gè)現(xiàn)象便可以得到判斷是否出現(xiàn)滾動(dòng)條的規(guī)則。

判斷元素是否有滾動(dòng)條 
因?yàn)槌霈F(xiàn)滾動(dòng)條便意味著元素空間將大于其內(nèi)容顯示區(qū)域，根據(jù)這個(gè)現(xiàn)象便可以得到判斷是否出現(xiàn)滾動(dòng)條的規(guī)則。
判斷豎向滾動(dòng)條 
el.scrollHeight > el.clientHeight

這條規(guī)則使用了獲取元素不同高度的兩個(gè)屬性：

scrollHeight
指的是元素的內(nèi)容高度，即如果有滾動(dòng)條，它的值會(huì)等于內(nèi)容實(shí)際的高度加padding值（并不包含border和margin值），在沒(méi)有內(nèi)容溢出的情況下它的值等于clientHeight；

clientHeight
指的是元素的內(nèi)部高度的px值，包括content和padding值之和，并不包括橫向滾動(dòng)條（horizontal scrollbar）、border和margin的值。

故而如果每個(gè)元素的scrollHeight值大于clientHeight值，則可以說(shuō)明其出現(xiàn)了豎向滾動(dòng)條。
判斷橫向滾動(dòng)條 
el.scrollWidth > el.clientWidth

同樣這里使用了獲取元素寬度的兩個(gè)屬性：

scrollWidth
指的是遠(yuǎn)的內(nèi)容高度，即它的值會(huì)等于內(nèi)容實(shí)際的寬度加上padding值（不包含border和margin值），在沒(méi)有內(nèi)容溢出的情況下它的值等于clientWidth；

clientWidth
指的是元素的內(nèi)部寬度的px值，包括content和padding值之和，并不包括橫向滾動(dòng)條（horizontal scrollbar）、border和margin的值。

故而如果每個(gè)元素的scrollWidth值大于clientWidth值，則可以說(shuō)明其出現(xiàn)了橫向滾動(dòng)條。
兼容性

scrollWidth/scrollHeight：IE8及以上、Chrome 4.0、FireFox 3.0、Safari 4.9 和Opera均支持兼容該屬性；

clientWidth/clientWidth:IE6以上及其他現(xiàn)代瀏覽器都支持該屬性。

特殊情況 
   當(dāng)元素指定了`overflow:hidden`時(shí)，是不會(huì)出現(xiàn)滾動(dòng)條的，就算元素的內(nèi)容尺寸超過(guò)了元素尺寸也是不會(huì)出現(xiàn)
滾動(dòng)條的，所以這里需要對(duì)元素是否應(yīng)用了`overflow:hidden`進(jìn)行判斷。

getComputedStyle
使用window對(duì)象下的getComputedStyle方法，可以獲得元素中最終應(yīng)用的CSS屬性值，并且返回一個(gè) CSSStyleDeclaration對(duì)象。故而我們可以通過(guò)以下寫法來(lái)獲取最終應(yīng)用于元素上overflow的值：

window.getComputedStyle(el).getPropertyValue("overflow")

currentStyle
鑒于getComputedStyleIE9以下不支持，故而這里需要使用IE中特有的currentStyle來(lái)獲取最終應(yīng)用于元素中的overflow屬性值：

el.currentStyle.overflow
總結(jié) 
綜上可以得出判斷元素出現(xiàn)滾動(dòng)條方法的代碼，如下：

function hasScrolled(el, direction = "vertical") {
    if(direction === "vertical") {
        return el.scrollHeight > el.clientHeight;
    }else if(direction === "horizontal") {
        return el.scrollWidth > el.clientWidth;
    }
 }

在線Demo：http://codepen.io/willshawzq/pen/PPVdNX

參考文檔

http://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/
https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth

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

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

相關(guān)文章

  • 判斷元素是否有滾動(dòng)條

    摘要：判斷元素是否有滾動(dòng)條因?yàn)槌霈F(xiàn)滾動(dòng)條便意味著元素空間將大于其內(nèi)容顯示區(qū)域，根據(jù)這個(gè)現(xiàn)象便可以得到判斷是否出現(xiàn)滾動(dòng)條的規(guī)則。 判斷元素是否有滾動(dòng)條 因?yàn)槌霈F(xiàn)滾動(dòng)條便意味著元素空間將大于其內(nèi)容顯示區(qū)域，根據(jù)這個(gè)現(xiàn)象便可以得到判斷是否出現(xiàn)滾動(dòng)條的規(guī)則。 判斷豎向滾動(dòng)條 el.scrollHeight > el.clientHeight 這條規(guī)則使用了獲取元素不同高度的兩個(gè)屬性： scroll...

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

  • 如何判斷元素是否在可視區(qū)域ViewPort

    摘要：在這里一次性做個(gè)總結(jié)，以用來(lái)判斷元素是否在可視區(qū)域以及用原生簡(jiǎn)單實(shí)現(xiàn)懶加載。被隱藏在內(nèi)容區(qū)域左側(cè)的像素?cái)?shù)。比如上篇文章文字跑馬燈項(xiàng)目中的使用戳此跳轉(zhuǎn)小結(jié)只讀屬性，不包括滾動(dòng)條。 個(gè)性簽名: 生如夏花，逝如冬雪；人生如此，何悔何怨。 前言: 經(jīng)常需要計(jì)算元素的大小或者所在頁(yè)面的位置,offsetWidth，clientWidth，scrollWidth,scrollTop這幾個(gè)關(guān)鍵字的出...

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

  • 如何判斷元素是否在可視區(qū)域ViewPort

    摘要：在這里一次性做個(gè)總結(jié)，以用來(lái)判斷元素是否在可視區(qū)域以及用原生簡(jiǎn)單實(shí)現(xiàn)懶加載。被隱藏在內(nèi)容區(qū)域左側(cè)的像素?cái)?shù)。比如上篇文章文字跑馬燈項(xiàng)目中的使用戳此跳轉(zhuǎn)小結(jié)只讀屬性，不包括滾動(dòng)條。 個(gè)性簽名: 生如夏花，逝如冬雪；人生如此，何悔何怨。 前言: 經(jīng)常需要計(jì)算元素的大小或者所在頁(yè)面的位置,offsetWidth，clientWidth，scrollWidth,scrollTop這幾個(gè)關(guān)鍵字的出...

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

  • 如何判斷元素是否在可視區(qū)域ViewPort

    摘要：在這里一次性做個(gè)總結(jié)，以用來(lái)判斷元素是否在可視區(qū)域以及用原生簡(jiǎn)單實(shí)現(xiàn)懶加載。被隱藏在內(nèi)容區(qū)域左側(cè)的像素?cái)?shù)。比如上篇文章文字跑馬燈項(xiàng)目中的使用戳此跳轉(zhuǎn)小結(jié)只讀屬性，不包括滾動(dòng)條。 個(gè)性簽名: 生如夏花，逝如冬雪；人生如此，何悔何怨。 前言: 經(jīng)常需要計(jì)算元素的大小或者所在頁(yè)面的位置,offsetWidth，clientWidth，scrollWidth,scrollTop這幾個(gè)關(guān)鍵字的出...

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<