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

1. 前言引入：

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

舉例說明：

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

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

代碼：

結(jié)果：

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

不拉滾動條：

向上來滾動條：

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

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

因為我們只想實現(xiàn)section部分的滾動，所以我們要在section的css屬性中加上這個屬性，但是因為如果我們只在section中加了這個屬性，那么我們拉滾動條是中間全部部分都滾動，那我們想單獨實現(xiàn)左邊ul列表部分的滾動，所以也同時咋ul的css里加上overflow：auto這個屬性；

代碼如下：

結(jié)果：

我們也可以使用屬性來隱藏這個滾動條，屬性是：“ : : -webkit-scrollbar”；

代碼如下：我們加入這樣一個css屬性可以隱藏滾動條

3. 實現(xiàn)彈性盒橫向出現(xiàn)滾動條：

屬性：flex-shrink：0；

可以配合overflow：auto；一起用

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

最新評論