HTML ---滾動條樣式代碼及 標簽的用法;

html中滾動條屬性設置

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立體滾動條陰影的顏色

 

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.設定窗口滾動條的顏色

設置窗口滾動條的顏色為紅色<body style="scrollbar-base-color:red">
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>

這樣調用:
<textarea class="coolscrollbar"></textarea>

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>

備注框

 

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 定義右下角拖動塊的樣式

 

 

html滾動條的使用技巧

(1)隱藏滾動條

<bodystyle="overflow-x:hidden;overflow-y:hidden">

 

(2)如何在單元格或圖層中出現滾動條

<divstyle="width:200px;height:200px;overflow-x:auto;overflow-y:auto;"></div>

 

(3)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-3dlight-color:color;設置或檢索滾動條亮邊框顏色;  

scrollbar-highlight-color:color;設置或檢索滾動條3D界面的亮邊顏色;  

scrollbar-face-color:color;設置或檢索滾動條3D表面的顏色;  

scrollbar-arrow-color:color;設置或檢索滾動條方向箭頭的顏色;當滾動條出現但不可用時,此屬性失效;   

scrollbar-shadow-color:color;設置或檢索滾動條3D界面的暗邊顏色;  

scrollbar-darkshadow-color:color;設置或檢索滾動條暗邊框顏色;  

scrollbar-base-color:color;設置或檢索滾動條基准顏色。其它界面顏色將據此自動調整。   

scrollbar-track-color:color;設置或檢索滾動條的拖動區域顏色   

 

備注:  

color為你要設置的顏色代碼,可以是16進制的,比如#FF0000,可以是以RGB表示的,比如rgb(255,0,255);設置滾動條樣式的時候不必要把所有的屬性都用上才會生效。

 

(4)javascript中的頁面元素定位

clientX、clientY是鼠標當前相對於網頁的位置,當鼠標位於頁面左上角時clientX=0, clientY=0;

offsetX、offsetY是鼠標當前相對於網頁中的某一區域的位置,當鼠標位於頁面中這一區域的左上角時offsetX=0, offsetY=0;

screenX、screenY是鼠標相對於用戶整個屏幕的位置;

x、y是鼠標當前相對於當前瀏覽器的位置

scrollLeft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離(因為有滾動條的產生,所以目前頁面可見內容是不定的)。

scrollTop:設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離。

left:對象相對於頁面的X坐標。

top:對象相對於頁面的Y坐標

 

(5)屏蔽選擇,右鍵等

<body oncontextmenu=self.event.returnValue=falseonselectstart="return false">

html中marquee標簽的用法

<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 /> 
 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM