這篇文章主要介紹css設(shè)置超出部分滾動條隱藏的方法,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
創(chuàng)新互聯(lián)是一家專注于網(wǎng)站制作、成都網(wǎng)站制作與策劃設(shè)計,修武網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:修武等地區(qū)。修武做網(wǎng)站價格咨詢:18980820575
方法:1、使用“-webkit-scrollbar”屬性設(shè)置,語法“-webkit-scrollbar{display:none;}”;2、在父元素div里設(shè)置“overflow: hidden”樣式,并為父元素和子元素設(shè)置寬度。
本教程操作環(huán)境:windows7系統(tǒng)、HTML5&&CSS3版、Dell G3電腦。
方法一、 利用 css 3 的新特性 -webkit-scrollbar, 但是這種方式不兼容 火狐 和 IE
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>超出部分隱藏滾動條</title> </head> <style type="text/css"> #box { width: 500px; height: 300px; overflow-x: hidden; overflow-y: scroll; line-height: 30px; text-align: center; } #box::-webkit-scrollbar { display: none; } </style> <body> <!-- 兼容所有瀏覽器的超出部分滾動不顯示滾動條 --> <div id="box"> 你好 </br>你好 </br> 你好 </br>你好 </br> 你好 </br>你好 </br> 你好 </br>你好 </br> 你好 </br>你好 </br> 你好 </br>你好 </br> 你好 </br>你好 </br> </div> </body> </html>
方法二、利用內(nèi)外層嵌套, 模擬, 兼容所有瀏覽器, 相對于方法一比較麻煩, 使用時不能對滾動條聲明任何樣式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>超出部分滾動條</title> </head> <style type="text/css"> #box { /* 父容器設(shè)置寬度, 并超出部分不顯示 */ width: 500px; height: 300px; overflow: hidden; } #box > div { /* 子容器比父容器的寬度多 17 px, 經(jīng)測正好是滾動條的默認(rèn)寬度 */ width: 517px; height: 300px; line-height: 30px; text-align: center; overflow-y: scroll; } </style> <body> <!-- 兼容所有瀏覽器的超出部分滾動不顯示滾動條 --> <div id="box"> <div> 你好 </br>你好 </br> 你好 </br>你好 </br> 你好 </br>你好 </br> 你好 </br>你好 </br> 你好 </br>你好 </br> 你好 </br>你好 </br> 你好 </br>你好 </br> </div> </div> </body> </html>
以上是“css設(shè)置超出部分滾動條隱藏的方法”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
本文名稱:css設(shè)置超出部分滾動條隱藏的方法
本文鏈接:http://chinadenli.net/article8/ppsgop.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)網(wǎng)站制作、做網(wǎng)站、網(wǎng)站維護(hù)、面包屑導(dǎo)航、網(wǎng)頁設(shè)計公司、響應(yīng)式網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)