overflow 屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情。定義當(dāng)一個(gè)元素的內(nèi)容太大而無(wú)法適應(yīng) 塊級(jí)格式化上下文時(shí)候該做什么。它是 overflow-x 和overflow-y的 簡(jiǎn)寫(xiě)屬性 。

1. 前言引入：

overflow：auto含義是：如果高度撐開(kāi)了原有設(shè)定的高度，那么可以添加這個(gè)屬性，讓它出現(xiàn)滾動(dòng)條滾動(dòng)顯示。

舉例說(shuō)明：

我們做一個(gè)京東移動(dòng)端，以iphone-XE分辨率為準(zhǔn)的例子，讓內(nèi)容滾動(dòng)顯示，見(jiàn)下圖要做的頁(yè)面：

思路：分為三個(gè)板塊，header、section、footer三個(gè)部分，也就是上面搜索欄部分、中間產(chǎn)品部分和下面按鈕部分；section部分又分為兩個(gè)部分，左邊導(dǎo)航欄和右邊圖片部分，思路理清楚了，我們就開(kāi)始做吧。

代碼：

結(jié)果：

看紅色框里的代碼，剛開(kāi)始我給header和footer部分都設(shè)置了固定的高度，然后利用彈性盒的性質(zhì)，讓中間的section部分自適應(yīng)，也就是flex：1；這個(gè)屬性的體現(xiàn)，然后我在section部分加入了ul列表標(biāo)簽，li標(biāo)簽一共有12個(gè)，現(xiàn)在看結(jié)果是正常顯示，當(dāng)我增加li標(biāo)簽的個(gè)數(shù)時(shí)，看下面結(jié)果會(huì)發(fā)生什么變化，結(jié)果如下：

不拉滾動(dòng)條：

向上來(lái)滾動(dòng)條：

結(jié)果發(fā)現(xiàn)header和footer部分不見(jiàn)了，當(dāng)我們向上或者向下拉滾動(dòng)條時(shí)，才能看見(jiàn)header或者footer部分，，，這樣子其實(shí)很不方便，我們一般見(jiàn)到的頁(yè)面都是headerfooter部分是固定在頁(yè)面上的，中間部分如果內(nèi)容多的話，只有中間部分可以拉滾動(dòng)條滾動(dòng)，上面和下面是不滾動(dòng)的，所以這個(gè)時(shí)候就要用到：overflow：auto；這個(gè)屬性啦，，，

2. overflow：auto；屬性的用法：

因?yàn)槲覀冎幌雽?shí)現(xiàn)section部分的滾動(dòng)，所以我們要在section的css屬性中加上這個(gè)屬性，但是因?yàn)槿绻覀冎辉趕ection中加了這個(gè)屬性，那么我們拉滾動(dòng)條是中間全部部分都滾動(dòng)，那我們想單獨(dú)實(shí)現(xiàn)左邊ul列表部分的滾動(dòng)，所以也同時(shí)咋ul的css里加上overflow：auto這個(gè)屬性；

代碼如下：

結(jié)果：

我們也可以使用屬性來(lái)隱藏這個(gè)滾動(dòng)條，屬性是：“ : : -webkit-scrollbar”；

代碼如下：我們加入這樣一個(gè)css屬性可以隱藏滾動(dòng)條

3. 實(shí)現(xiàn)彈性盒橫向出現(xiàn)滾動(dòng)條：

屬性：flex-shrink：0；

可以配合overflow：auto；一起用

到此這篇關(guān)于overflow:auto的用法和實(shí)現(xiàn)彈性盒橫向滾動(dòng)效果的文章就介紹到這了,更多相關(guān)overflow:auto用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論