DIV滾動條設(shè)置添加 CSS滾動條顯示與滾動條隱藏

1、div滾動條設(shè)置添加 css滾動條顯示與滾動條隱藏div滾動條設(shè)置 css滾動條顯示與滾動條躲藏對div設(shè)置滾動條，設(shè)置其橫向滾動條和縱向滾動條樣式。所需css樣式為overflow-y和overflow-x來設(shè)置div盒子對象右側(cè)和底部滾動條效果。同時也可以用法css樣式設(shè)置html框架iframe的滾動條躲藏，接下來為大家介紹。一、css基礎(chǔ)熟悉 - topoverflow-y:scroll; 總是顯示縱向滾動條overflow-y:visible : 不剪切內(nèi)容也不添加縱向滾動條了解：overflow-y手冊overflow-x:scroll; 總是顯示橫向滾動條overflow-x:v

2、isible : 不剪切內(nèi)容也不添加橫向滾動條了解：overflow-x手冊了解css overflow二、div設(shè)置滾動條實(shí)例 - topdivcss5通過對第一個div對象設(shè)置div寬度、div高度、div邊框樣式，并在div盒子里添加演示文字內(nèi)容，其次個盒子設(shè)置相同的css樣式，盒子文字內(nèi)容相同，并設(shè)置橫向和縱向滾動條，觀看效果。第一個盒子css命名為divcs5-a,其次個div盒子樣式挑選器命名為divcss5-b。1、詳細(xì)完整html源代碼如下： div滾動條 在線演示 .divcss5-a,.divcss5-b width:150px; height:100px; float:l

3、eft; border:1px solid f00 .divcss5-b margin-left:10px;overflow-y:scroll; overflow-x:scroll; /* css注釋解釋：設(shè)置其次個盒子與第一個盒子間距為10px，并設(shè)置了橫縱滾動條樣式 */ divcss5測試內(nèi)容，歡迎來到divcss5學(xué)習(xí)div+css技術(shù)。大家可以通過divcss5主站上的全部免費(fèi)css教程足可學(xué)會div css技術(shù) - 假如需要深化系統(tǒng)學(xué)習(xí)、較短時光達(dá)到抱負(fù)學(xué)習(xí)效果可參與div+css培訓(xùn)班學(xué)習(xí)。 divcss5測試內(nèi)容，歡迎來到divcss5學(xué)習(xí)div+css技術(shù)。大家可以通過div

4、css5主站上的全部免費(fèi)css教程足可學(xué)會div css技術(shù) - 假如需要深化系統(tǒng)學(xué)習(xí)、較短時光達(dá)到抱負(fù)學(xué)習(xí)效果可參與div+css培訓(xùn)班學(xué)習(xí)。 為了觀看效果我們對兩個div盒子都設(shè)置基礎(chǔ)相同的css樣式和相同的文字內(nèi)容。對.divcss5-b設(shè)置了x和y（橫向和縱向的滾動條樣式。）2、觀看div+css滾動條實(shí)例效果截圖css div滾動條樣式實(shí)例效果截圖解釋：第一個盒子.divcss5-a內(nèi)容過多而溢出了div盒子，其次個盒子設(shè)置了滾動條樣式，所以沒有溢出，縱向右側(cè)（y）浮現(xiàn)了可下拉上拉滾動條樣式，橫向底部（x）浮現(xiàn)滾動條效果但不行左右拉動，這是由于文字內(nèi)容不能撐開div寬度，假如是大于div設(shè)置寬度的這樣橫向底部（x）就會浮現(xiàn)滾動條效果。3、在線演示：查看案例4、實(shí)例打包下載立刻下載 （0.977kb）5、小結(jié)，如何躲藏css div滾動條div默認(rèn)是沒有滾動條的，假如加了滾動條樣式，去掉后滾動條自然就會消逝。假如是框架iframe浮現(xiàn)的滾動條，假如要想x橫向躲藏滾動條，只需要設(shè)置overflow-x:visible或overflow-x:hidden；假如想iframe浮現(xiàn)y縱向滾動條躲藏可以設(shè)置css樣式overflow-y:visible或overflow-y:hidden即可躲藏滾動