您好,登錄后才能下訂單哦!
這篇文章主要介紹了css overflow屬性如何實(shí)現(xiàn)滾動(dòng)條設(shè)置和隱藏滾動(dòng)條,具有一定借鑒價(jià)值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
我們?cè)谠O(shè)計(jì)網(wǎng)頁(yè)開(kāi)發(fā)時(shí),有時(shí)會(huì)需要在指定頁(yè)面給指定部分添加滾動(dòng)條樣式,顯然大家都知道之所以要用到滾動(dòng)條是因?yàn)槲覀冮喿x的內(nèi)容過(guò)多了,為了方便用戶(hù)閱讀,設(shè)置滾動(dòng)條從而達(dá)到能隨意拉動(dòng)溢出的網(wǎng)頁(yè)內(nèi)容的目的。
然而從視覺(jué)美觀(guān)上來(lái)說(shuō),滾動(dòng)條有時(shí)隱藏起來(lái)會(huì)更好。
下面我們通過(guò)具體的代碼示例為大家詳細(xì)介紹。
css中overflow屬性設(shè)置滾動(dòng)條的具體代碼示例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css中overflow屬性設(shè)置滾動(dòng)條的具體用法示例</title> <style> .a1 { background-color: #acffcb; width:100px; height:100px; overflow:scroll; } .a2 { background-color: #a7fcff; width:100px; height:100px; overflow:hidden; } .a3 { margin-top: 10px; background-color: #ccccff; width:100px; height:100px; overflow:scroll; overflow-x:hidden; } </style> </head> <body> <div class="a1">css overflow屬性實(shí)現(xiàn)橫向縱向滾動(dòng)條,css overflow屬性實(shí)現(xiàn)橫向縱向滾動(dòng)條</div> <div class="a2">css overflow屬性實(shí)現(xiàn)隱藏全部滾動(dòng)條,css overflow屬性實(shí)現(xiàn)隱藏全部滾動(dòng)條</div> <div class="a3">css overflow屬性實(shí)現(xiàn)隱藏豎向滾動(dòng)條,css overflow屬性實(shí)現(xiàn)隱藏豎向滾動(dòng)條</div> </body> </html>
上述代碼在瀏覽器中訪(fǎng)問(wèn)效果如下圖所示:
我們從圖中可以看出,我們給a1添加了overflow scroll樣式屬性后,就出現(xiàn)了豎向和縱向的滾動(dòng)條,那么在固定大小的div塊中如果文本過(guò)多不完全顯示,就可以通過(guò)拉動(dòng)滾動(dòng)條來(lái)實(shí)現(xiàn)查看剩下的內(nèi)容。
overflow中scroll屬性就表示滾動(dòng)條設(shè)置。
當(dāng)我們給a2添加css overflow hidden樣式屬性后,就去除所有的滾動(dòng)條了。并且剩下的文本沒(méi)有辦法查看。我們?cè)倏碼3的樣式,這里我們添加了overflow-x:hidden樣式屬性后,就隱藏了橫向滾動(dòng)條。
通過(guò)上述描述,我們可以得知。想要通過(guò)css中overflow屬性設(shè)置滾動(dòng)條,掌握overflow scroll屬性即可!而如果想要隱藏或者去除橫向或者縱向滾動(dòng)條的話(huà),只要了解hidden、overflow-x、overflow-y的屬性。overflow-x表示橫向滾動(dòng)條,overflow-y表示豎向滾動(dòng)條,hidden則可以設(shè)置是否隱藏。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享css overflow屬性如何實(shí)現(xiàn)滾動(dòng)條設(shè)置和隱藏滾動(dòng)條內(nèi)容對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,遇到問(wèn)題就找億速云,詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。