css如何设置滚动条?实例详解css滚动条设置的方法(CSS设置滚动条样式)
在網頁的設計中,滾動條的設計是非常必要的,這樣當文字或者圖片超出容器大小,就會出現滾動條樣式,那么,css如何設置滾動條呢?接下來就來給大家說一說css滾動條設置的方法。
首先我們來看一下css設置滾動條可能需要的屬性。
1、overflow-y : 設置當對象的內容超過其指定高度時如何管理內容;overflow-x : 設置當對象的內容超過其指定寬度時如何管理內容
參數:
visible:擴大面積以顯示所有內容
auto:僅當內容超出限定值時添加滾動條
hidden:總是隱藏滾動條
scroll:總是顯示滾動條
2、height : 設置滾動條的高度(修改其后數值即可)。
3、滾動條顏色參數設置:
scrollbar-3d-light-color 設置或檢索滾動條亮邊框顏色
scrollbar-highlight-color 設置或檢索滾動條3D界面的亮邊(ThreedHighlight)顏色
scrollbar-face-color 設置或檢索滾動條3D表面(ThreedFace)的顏色
scrollbar-arrow-color 設置或檢索滾動條方向箭頭的顏色
scrollbar-shadow-color 設置或檢索滾動條3D界面的暗邊(ThreedShadow)顏色
scrollbar-dark-shadow-color 設置或檢索滾動條暗邊框(ThreedDarkShadow)顏色
scrollbar-base-color 設置或檢索滾動條基準顏色
其次我們來看css設置滾動條樣式。
在html頁面中我們可以這樣定義整個頁面的滾動條。
*{
scrollbar-3dlight-color:#D4D0C8;
scrollbar-highlight-color:#fff;
scrollbar-face-color:#E4E4E4;
scrollbar-arrow-color:#666;
scrollbar-shadow-color:#808080;
scrollbar-darkshadow-color:#D7DCE0;
scrollbar-base-color:#D7DCE0;
scrollbar-track-color:#;
}
登錄后復制
最后我們來看一看css 設置滾動條后如何隱藏(橫向、豎向)
很多人都說使用overflow-y:hiddencss可以隱藏滾動條,但是只能針對div元素,并不能隱藏瀏覽器,而一些資料說
<boby>里加入scroll="no",可隱藏滾動條;在<boby>里加入style="overflow-x:hidden",可隱藏水平滾動條;加入style="overflow-y:hidden",可隱藏垂直滾動條。
1、完全隱藏:在里加入scroll="no",可隱藏滾動條;
2、在不需要時隱藏:指當瀏覽器窗口寬度或高度大于頁面的寬或高時,不顯示滾動條;反之,則顯示;
3、樣式表方法:
加入style="overflow-x:hidden",可隱藏水平滾動條;
加入style="overflow-y:hidden",可隱藏垂直滾動條。
最終隱藏方法:
在頁面添加
<style>html {
overflow-x:hidden; //隱藏水平滾動條
overflow-y:hidden;//隱藏垂直滾動條
}
</style>
登錄后復制
相關推薦:
css固定div頭部不隨滾動條滾動
css層滾動條_經驗交流
以上就是css如何設置滾動條?實例詳解css滾動條設置的方法的詳細內容,更多請關注風君子博客其它相關文章!
總結
以上是生活随笔為你收集整理的css如何设置滚动条?实例详解css滚动条设置的方法(CSS设置滚动条样式)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: redis3.0.7_sds.c_sds
- 下一篇: 刺激战场ios重复名空格