成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

判斷元素是否有滾動條

sshe / 2715人閱讀

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

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

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

scrollHeight
指的是元素的內容高度，即如果有滾動條，它的值會等于內容實際的高度加padding值（并不包含border和margin值），在沒有內容溢出的情況下它的值等于clientHeight；

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

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

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

scrollWidth
指的是遠的內容高度，即它的值會等于內容實際的寬度加上padding值（不包含border和margin值），在沒有內容溢出的情況下它的值等于clientWidth；

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

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

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

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

特殊情況 
   當元素指定了`overflow:hidden`時，是不會出現(xiàn)滾動條的，就算元素的內容尺寸超過了元素尺寸也是不會出現(xiàn)
滾動條的，所以這里需要對元素是否應用了`overflow:hidden`進行判斷。

getComputedStyle
使用window對象下的getComputedStyle方法，可以獲得元素中最終應用的CSS屬性值，并且返回一個 CSSStyleDeclaration對象。故而我們可以通過以下寫法來獲取最終應用于元素上overflow的值：

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

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

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

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

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

轉載請注明本文地址：http://systransis.cn/yun/49657.html

相關文章

  • 判斷元素是否有滾動條

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

    rose 評論0 收藏0

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

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

    jayzou 評論0 收藏0

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

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

    xiguadada 評論0 收藏0

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

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

    zhigoo 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<