css隱藏div滾動條的方法:先建立HTML範例檔案;然後在body中定義一些文字內容;接著設定滾動部分的高度;最後透過「display:none;」屬性實作隱藏div滾動條即可。
本文操作環境:windows7系統、HTML5&&CSS3版、Dell G3電腦。
css 為div添加滾動並隱藏滾動條,或修改滾動條軌道顏色
在html中
<div class="box"> <div>下面内容会单独滚动</div> <div class="scroll"> <div class="content"> <p>1111111111111111</p> <p>222222222222222</p> <p>333333333333333</p> <p>4444444444444444</p> <p>1111111111111111</p> <p>222222222222222</p> <p>333333333333333</p> <p>4444444444444444</p> </div> </div> </div>
css部分
<style> div{ font-size: 15px; margin-bottom: 20px; } .content{ height: 300px;v // 必须设定滚动部分的高度 background-color: cadetblue; color: antiquewhite; overflow-x: hidden; /*x轴禁止滚动*/ overflow-y: scroll;/*y轴滚动*/ } .content::-webkit-scrollbar { display: none;/*隐藏滚动条*/ } p{ margin-bottom: 30px; font-size: 17px; color: #333; } </style>
# 或如果需要修改捲軸樣式使用下面樣式
<style> div{ font-size: 15px; margin-bottom: 20px; } .content{ height: 300px;v // 必须设定滚动部分的高度 background-color: cadetblue; color: antiquewhite; overflow-x: hidden; /*x轴禁止滚动*/ overflow-y: scroll;/*y轴滚动*/ } .content::-webkit-scrollbar{ //设置滚动条宽高 width:8px; height:8px } .content::-webkit-scrollbar-track{// 滚动条轨道样式 -webhit-box-shadow: inset 0 0 5px transparent; border-radius:0; background:transparent; } .content::-webkit-scrollbar-thumb{//滚动条样式 border-radius:5px; -webkit-box-shadow:inset 0 0 5px #242B56; background:#242B56; } p{ margin-bottom: 30px; font-size: 17px; color: #333; } </style>
【建議學習:css影片教學】
以上是css怎麼隱藏div捲軸的詳細內容。更多資訊請關注PHP中文網其他相關文章!