用CSS控制瀏覽器滾動條樣式原始碼

2020-12-16 站長之家

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

以上七個屬性設置的值都是顏色值,可以使用樣式表定義的各種表達方式。

使用以上的樣式定義內容,我們可以指定瀏覽器窗口、多行文本框的滾動條的顯示與否和顏色樣式,第一組樣式屬性用於設定被設定對象是否顯示滾動條,第二組樣式屬性則用於設置滾動條的顏色,要注意的本文涉及的樣式屬性都是ie才能支持的,第二組的樣式屬性只有ie5.5版本才能支持,所以請大家在調試的時候注意。

我們通過幾個實例來講解上述的樣式屬性:

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.設定其他元素時,基本上一樣,你最好是在樣式表文件中定義好一個類,這樣你就可以重複使用了。

以下為引用的內容:
 .coolscrollbar
  {
  scrollbar-arrow-color:yellow;
  scrollbar-base-color:lightsalmon;
  }

將以上語句加入到樣式表文件中或html頭部的<style></style>當中,然後使用

<textarea></textarea>

相關焦點

  • 網站變灰CSS代碼以及html代碼
    悼念舟曲,燭光祈福網頁顏色變黑白代碼1、為方便站點哀悼,特提供css濾鏡代碼,以表哀悼。以下為全站CSS代碼。,將代碼加到CSS最頂端就可以實現素裝。; html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);} </style> 3、有一些站長的網站可能使用這個css
  • 如何使英語和連續數字的自動換行用CSS代碼實現?
    應用CSS代碼來讓英文和連續數字實現自動換行關於自動換行,如果說是正常字符換行是比較容易的,那麼連續數字和英文字符會把容器撐大,讓人頭疼,接下來長沙同文來和你講一講CSS是如何換行的? 像div,p等塊級元素 ,正常文字的換行(亞洲文字和非亞洲文字)元素都是自動設定的white-space:normal,當定義了寬度之後就會自動實現換行:<div id="wrap">正常文字的換行(亞洲文字和非亞洲文字)元素擁有默認的white-space:normal,當定義</div>  css
  • CSS自定義滾動條樣式
    相信很多人都遇到過在設計中自定義滾動條樣式的情景,之前我都是努力說服設計師接受瀏覽器自帶的滾動條樣式,但是這樣只能規避還是解決不了問題,最近在項目中遇到了,正好來總結一下。當然,兼容所有瀏覽器的滾動條樣式目前是不存在的。
  • HTML+CSS:css定位詳解之相對定位、絕對定位和固定定位
    本篇文章我們主要給大家說一下css的定位。css的定位是我們以後網頁製作中比較常用的屬性,也是很重要的知識點。了解各個定位的作用以及層級關係對以後的頁面布局至關重要。代碼以及頁面顯示效果就如下所示:(div向左和向上偏移了100px)2)絕對定位如果想為元素設置層模型中的絕對定位,需要設置position:absolute;,這條語句的作用將元素從文檔流中拖出來,將不佔用原來元素的空間,然後使用
  • 網頁設計之css+div PK table+css
    圓角——可以用div+css做出一樣漂亮的圓角,而且不用圖片,而且是寬度、高度自適應的怎麼實現?挖挖Google Talk的css模板忘掉 div 和 table 吧!html 最大的特點就是兼容性和自適應性。使用了複雜的 div+css 後,你也許會發現在 IE 中很美觀的頁面在其他瀏覽器中看起來象一團漿糊。
  • CSS固定定位{position:fixed}
    不知道您是否留意了,瀏覽本站時,瀏覽器右下角有一個標著top的黑色直角三角形,可以點擊它返回到正在瀏覽的網頁頁眉。當滾動網頁時,它的位置一直沒有任何改變,您感覺它怎麼樣?這就是通過CSS的定位屬性{position:fixed}來實現的,通過它可以讓HTML元素脫離文檔流固定在瀏覽器的某個位置。
  • 前端開發必備的CSS命名規範與常用CSS代碼集合
    編輯 | web前端開發來源 | web前端開發我們在用html+css進行網頁的排版布局時,
  • 這五個有用的 CSS 屬性完全被我忽視了
    element { word-spacing: 6px; /* word spacing wow such */}要實現這個目的,你必須為不同的瀏覽器,準備不同的代碼:html::-webkit-scrollbar { display: none;}
  • css3必須了解的知識 css中常見的樣式屬性和值
    瀏覽器設置的光標。所以上面這段代碼實現的就是距離左邊20px,距離上邊20px,這樣理解可能比上面我說的以相反的方向移動要簡單很多吧。浮動和清除浮動css裡面浮動用的還是挺多的,要好好學哦!不會的關注我,我會教你的哦!全棧學習筆記碼字太難了!
  • 校內網css代碼添加背景圖片常用代碼
    這樣做比較麻煩,不但代碼較多,還要為表格的大小和定位傷些腦筋。現在用CSS就可以輕鬆地直接搞定了,而且對象的範圍很廣,可以是一段文字,也可以只是一個單詞或一個字母。如果用「none」來代替背景圖片的存放路徑,將什麼也不顯示。
  • 前端進階:css必知的幾個底層知識和技巧
    2.對於img元素,如果有css尺寸,則最終尺寸由css尺寸決定(css尺寸 > html尺寸 > 固有尺寸)3.當圖片的src屬性預設時,圖片不會有任何請求,是最高效的實現方式,如下展示的是使用此方式的圖片佔位代碼(對於firefox瀏覽器,src預設的img是一個普通的內聯元素,寬高設置無效):
  • Web開發者的福利 30段超實用CSS代碼
    CSS3發光輸入框下面的這段代碼重寫了瀏覽器的默認行為,可以讓Chrome和Safari瀏覽器下普通的表單輸入框產生發光效果。/snippets/css/glowing-blue-input-highlights/12.基於文件類型來創建連結樣式下面這段代碼通過使用CSS選擇器和圖像圖標來實現各種類型的連結樣式,可能會用到各種協議(HTTP、FTP、IRC,mailto),或者是文件本身的類型(mp3、avi、pdf)。
  • HTML+CSS:掌握css的繼承以及代碼的優先級問題
    上邊文章我們說了使用css的三種不同的選擇器,本篇文章我們主要介紹css的繼承規則以及css代碼的權重優先級問題。(1)css的繼承規則CSS的某些樣式代碼是具有繼承性的,那麼究竟什麼是繼承呢?(2)css代碼的權重優先級css就像工程師一樣是很嚴謹的,有的時候我們為同一個元素設置了不同的CSS樣式代碼,那么元素會啟用哪一個CSS樣式呢?我們來看一下面的代碼:上邊的代碼中,p和.first都匹配到了p這個標籤上,那麼會顯示哪種顏色呢?
  • HTML+CSS:認識css的概念與語法,了解css的優勢
    本篇文章先帶大家認識一下css的概念與語法,了解一下css的優勢之處。1)css的概念與語法CSS全稱為「層疊樣式表 (Cascading Style Sheets)」,它主要是用於定義HTML內容在瀏覽器內的顯示樣式,比如文字大小、顏色、字體加粗等。
  • HTML實戰一:初始化css代碼,為什麼以及怎麼做?
    之前的文章我們介紹了很多關於html以及css的基礎內容,從本篇文章開始我們要進行實戰訓練,我們實戰第一篇文章要介紹的就是初始化我們的css代碼;1)為什麼要初始化css代碼首先是因為瀏覽器的兼容問題,不同瀏覽器對有些標籤的默認值是不同的,如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異
  • 編寫出色CSS代碼的13個建議
    CSS學起來並不難,但在大型項目中,就變得難以管理,特別是不同的人在CSS書寫風格上稍有不同,團隊上就更加難以溝通,為此總結了一些如何實現高效整潔的CSS代碼原則:1. 使用Reset但並非全局Reset不同瀏覽器元素的默認屬性有所不同,使用Reset可重置瀏覽器元素的一些默認屬性,以達到瀏覽器的兼容。
  • 注意CSS代碼中的!important屬性
    首頁 > 教程 > 關鍵詞 > 注意最新資訊 > 正文 注意CSS代碼中的!前幾天寫一些CSS代碼的時候又難為我了,因為那個該死的IE6對CSS的支持是如此的差勁,以前我還沒注意過,因為做的東西基本都是基於IE的,可是我這次為博客寫的CSS要支持不止IE一個瀏覽器,可恨的是我裝的Windows 7,這裡面自帶的是IE8瀏覽器,我自認為已經沒有問題了,可是打開IE6,仍然出現錯位,於是我決定看看IE6到底是什麼情況。
  • CSS工程化
    css in js 的特點:絕無衝突的可能:由於它根本不存在類名,所以絕不可能出現類名衝突更加靈活:可以充分利用JS語言靈活的特點,用各種招式來處理樣式應用面更廣:只要支持js語言,就可以支持css in js,因此,在一些用JS語言開發移動端應用的時候非常好用,因為移動端應用很有可能並不支持css書寫不便:書寫樣式,特別是公共樣式的時候
  • HTML CSS整理筆記
    18.表格基本結構:單元格、行、列 (1)<table><tr><th><td> (2)HTML5中已廢除table的border屬性,用css控制邊框寬度。
  • 前端進階: css必知的幾個底層知識和技巧
    2.對於img元素,如果有css尺寸,則最終尺寸由css尺寸決定(css尺寸 > html尺寸 > 固有尺寸)3.當圖片的src屬性預設時,圖片不會有任何請求,是最高效的實現方式,如下展示的是使用此方式的圖片佔位代碼(對於firefox瀏覽器,src預設的img是一個普通的內聯元素,寬高設置無效):img { visibility: hidden