專注Java教育14年
全國咨詢/投訴熱線：400-8080-105
更新時間：2021-11-25 11:01:25 來源：動力節點 瀏覽1148次
scrollbar屬性、樣式詳解
1.overflow內容溢出時的設置(設定被設定對象是否顯示滾動條)
overflow-x水平方向內容溢出時的設置
overflow-y垂直方向內容溢出時的設置
以上三個屬性設置的值為visible(默認值)、scroll、hidden、auto。
2. scrollbar-3d-light-color立體滾動條亮邊的顏色(設置滾動條的顏色)
scrollbar-arrow-color上下按鈕上三角箭頭的顏色
scrollbar-base-color滾動條的基本顏色
scrollbar-dark-shadow-color立體滾動條強陰影的顏色
scrollbar-face-color立體滾動條凸出部分的顏色
scrollbar-highlight-color滾動條空白部分的顏色
scrollbar-shadow-color立體滾動條陰影的顏色
HTML各種滾動屬性代碼
<marquee>普通卷動</marquee> <br />
<marquee behavior=slide>滑動</marquee> <br />
<marquee behavior=alternate>來回卷動 </marquee><br />
<marquee direction=down>向下卷動</marquee> <br />
<marquee direction=up>向上卷動</marquee> <br />
<marquee direction=right>向右卷動</marquee> <br />
<marquee direction=left>向左卷動</marquee> <br />
<marquee loop=2>卷動次數</marquee> <br />
<marquee scrollamount=30>設定卷動距離</marquee> <br />
html滾動條顏色設置方法介紹
scrollbar-arrow-color: color; /*三角箭頭的顏色*/
scrollbar-face-color: color; /*立體滾動條的顏色（包括箭頭部分的背景色）*/
scrollbar-3dlight-color: color; /*立體滾動條亮邊的顏色*/
scrollbar-highlight-color: color; /*滾動條的高亮顏色（左陰影？）*/
scrollbar-shadow-color: color; /*立體滾動條陰影的顏色*/
scrollbar-darkshadow-color: color; /*立體滾動條外陰影的顏色*/
scrollbar-track-color: color; /*立體滾動條背景顏色*/
scrollbar-base-color: color; /*滾動條的基色*/
webkit不再是用簡單的幾個CSS屬性，而是一坨的CSS偽元素：
-webkit-scrollbar 滾動條整體部分
-webkit-scrollbar-button 滾動條兩端的按鈕
-webkit-scrollbar-track 外層軌道
-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分（除去）
-webkit-scrollbar-thumb （拖動條）
-webkit-scrollbar-corner 邊角
-webkit-resizer 定義右下角拖動塊的樣式
1.讓瀏覽器窗口永遠都不出現滾動條
沒有水平滾動條
<body style="overflow-x:hidden">
沒有垂直滾動條
<body style="overflow-y:hidden">
沒有滾動條
<body style="overflow-x:hidden;overflow-y:hidden">或<body
style="overflow:hidden">
2.設定多行文本框的滾動條
沒有水平滾動條
<textarea style="overflow-x:hidden"></textarea>
沒有垂直滾動條
<textarea style="overflow-y:hidden"></textarea>
沒有滾動條
<textarea style="overflow-x:hidden;overflow-y:hidden"></textarea>
或<textarea style="overflow:hidden"></textarea>
3.設定窗口滾動條的顏色
設置窗口滾動條的顏色為紅色
scrollbar-base-color設定的是基本色，一般情況下只需要設置這一個屬性就可以達到改變滾動條顏色的目的。
加上一點特別的效果：
<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">
4.在樣式表文件中定義好一個類，調用樣式表。
<style>
.coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;}
</style>
這樣調用：
Scrollbar-Face-Color為滾動條表面顏色設定;
Scrollbar-Highlight-Color為滾動條上斜面和左斜面顏色設定;
Scrollbar-Shadow-Color為滾動條下斜面和右斜面顏色設定;
Scrollbar-3Dlight-Color為滾動條上邊和左邊的邊沿顏色設定;
Scrollbar-Arrow-Color為滾動條兩端箭頭顏色設定。
Scrollbar-Track-Color為滾動條底板顏色設定;
Scrollbar-Darkshadow為滾動條下邊和右邊邊沿顏色設定。
舉例：
<textarea style="width:330px; overflow:scroll; overflow-x:hidden;"></textarea>
5.如何在單元格或圖層中出現滾動條
<divstyle="width:200px;height:200px;overflow-x:auto;overflow-y:auto;"></div>
javascript改變框架中滾動條的樣式，比如改變顏色、改為平面效果等
<STYLE>
BODY {SCROLLBAR-FACE-COLOR: #ffcc99;
SCROLLBAR-HIGHLIGHT-COLOR: #ff0000;
SCROLLBAR-SHADOW-COLOR: #ffffff;
SCROLLBAR-3DLIGHT-COLOR: #000000;
SCROLLBAR-ARROW-COLOR: #ff0000;
SCROLLBAR-TRACK-COLOR: #dee0ed;
SCROLLBAR-DARKSHADOW-COLOR: #ffff00;}
</STYLE>
scrollbar-track-color:color;設置或檢索滾動條的拖動區域顏色
Java實驗班
0基礎 0學費 15天面授
Java就業班
有基礎 直達就業
Java夜校直播班
業余時間 高薪轉行
Java在職加薪班
工作1~3年，加薪神器
Java架構師班
工作3~5年，晉升架構
提交申請后，顧問老師會電話與您溝通安排學習
官方微信
官方抖音
京公網安備 11030102010736號