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元素，並不能隱藏瀏覽器，而有些資料說 裡加入scroll="no"，可隱藏捲軸；在裡加入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滾動條設定的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！