CSS控制捲軸樣式的解析

最後更新：2017-11-17 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

我們在之前的兩篇文章中，我們給大家介紹了關於CSS設定div捲軸樣式、以及CSS3自訂捲軸樣式的執行個體，都知道當內容超出容器時，容器會出現捲軸，那我們如何使用CSS控制捲軸樣式的呢？今天就給大家詳細介紹！

例子：

/*作為IT界最前端的技術達人，頁面上的每一個元素的樣式我們都必須較真，就是捲軸我們也不會忽略。下面我給大家分享一下如何通過CSS來控制捲軸的樣式，代碼如下：*/ /*定義捲軸軌道*/    #style-2::-webkit-scrollbar-track    {        background-color: #F5F5F5;        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22);    }    /*定義捲軸高寬及背景*/    #style-2::-webkit-scrollbar    {        width: 10px;        background-color: rgba(0, 0, 0, 0.34);    }    /*定義捲軸*/    #style-2::-webkit-scrollbar-thumb    {        background-color: #8b8b8b;        border-radius: 10px;    }

*要實現單個p裡面的內容滾動，需要滿足三個條件：

1、p必須設定固定的高度，不能使用百分比或 auto 等彈性值。

2、其中的內容高度必須超過它本身的高度。

3、必須添加屬性 “overflow：auto”。

*隱藏捲軸：

1、去掉水平方向的捲軸：

<body style="overflow-x:hidden">

2、去掉垂直方向的捲軸：

<body style="overflow-y:hidden">

3、隱藏橫向、顯示縱向捲軸：

<body style="overflow-x:hidden;overflow-y:scroll">

4、隱藏全部捲軸：

<body style="overflow:hidden">或者<body scroll="no">

更好的方法就是把捲軸的顏色設定為完全透明，這樣既可以實現內容的滾動，又達到不顯示捲軸的目的。

應用:

沒有水平捲軸:

<p style="overflow-x:hidden">test</p>

沒有垂直捲軸

<p style="overflow-y:hidden">test</p>

沒有捲軸

<p style="overflow-x:hidden;overflow-y:hidden" 或 style="overflow:hidden">test</p>

自動顯示捲軸

<p style="height:100px;width:100px;overflow:auto;">test</p>

自己定義捲軸的顏色，代碼如下：

Body {scrollbar-arrow-color: #f4ae21; /*三角箭頭的顏色*/scrollbar-face-color: #333; /*立體捲軸的顏色*/scrollbar-3dlight-color: #666; /*立體捲軸亮邊的顏色*/scrollbar-highlight-color: #666; /*捲軸空白部分的顏色*/scrollbar-shadow-color: #999; /*立體捲軸陰影的顏色*/scrollbar-darkshadow-color: #666; /*立體捲軸強陰影的顏色*/scrollbar-track-color: #666; /*立體捲軸背景顏色*/scrollbar-base-color:#f8f8f8; /*捲軸的基本顏色*/Cursor:url(mouse.cur); /*自訂個性滑鼠*/}

以上2項適用與<body>、<p>、<textarea>、<iframe>

附：

解釋一下overflow屬性和不同值得作用：

overflow:visible;不剪下內容也不添加捲軸。預設值。使用該值時，無論設定的"width"和"height"的值是多少，其中的內容無論是否超出範圍都將被強制顯示。

overflow：auto；在需要時剪下內容並添加捲軸。

overflow：hidden；不顯示超過對象高度的內容。

overflow：scroll；總是顯示縱向捲軸。

overflow 水平及垂直方向內容溢出時的設定

overflow-x 水平方向內容溢出時的設定

overflow-y 垂直方向內容溢出時的設定

以上屬性設定的值為visible、scroll、hidden、auto

hidden 效果與visible相反。任何超出"width"和"height"的內容都會不可見。

scroll 無論內容是否超越範圍，都將顯示捲軸。

總結：

相信通過本文的學習，小夥伴們對css控制捲軸樣式，有了進一步的瞭解和認識，希望對你的工作有所協助！

相關推薦：

CSS3自訂捲軸樣式的樣本詳解

CSS設定div捲軸樣式的樣本

html中關於div捲軸樣式設計的執行個體

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More