瀏覽器滾動條樣式還可以改變，你知道嗎？

fjcgreat 發布于2019-08-30 15:53 / 640人閱讀

摘要：有時候，我們是不是覺得瀏覽器默認的滾動條很，那么瀏覽器滾動條樣式能否改變呢，答案是肯定的，今天就給大家分享一下怎么改變瀏覽器的默認滾動條，讓我們的頁面更加炫酷。

有時候，我們是不是覺得瀏覽器默認的滾動條很low，那么瀏覽器滾動條樣式能否改變呢，答案是肯定的，今天就給大家分享一下怎么改變瀏覽器的默認滾動條，讓我們的頁面更加炫酷。

在次之前，我們先來了解一下滾動條產生的原因，通俗的來講就是內容超出容器就會出現滾動條。

verflow介紹

定義：overflow 屬性指定當它溢出其塊級容器時,是否剪輯內容，渲染滾動條或顯示內容。
屬性值

overflow:visible    //默認值。內容不會被修剪，超出內容會顯示在元素框之外
overflow:hidden     //內容會被修剪。超出內容被隱藏
overflow:scroll     //內容會被修剪，瀏覽器會顯示滾動條以便查看其余內容
overflow:auto       //如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容
overflow:inherit    //規定從該父元素繼承overflow屬性的值`

注：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 “inherit”。
當overflow設為除默認值（visible）以外的值時，將會創建一個會塊級式化上下文（清除浮動的一種方式），更多可查看深入理解BFC和Margin Collapse

下面直接進入教程，以Google瀏覽器為例：

效果圖：

webkit內核的瀏覽器滾動條樣式

首先給兩個div，兩個div是父子關系，里面的div寬高比外面的寬高值大，再加上overflow：hidd屬性模擬出現滾動條效果，然后進行css更改樣式。

html部分

css樣式

這里給大家做了個圖,方便大家理解：

自定義IE瀏覽器滾動條樣式

IE瀏覽器，就比較簡單了，直接定義整個頁面的滾動條，但IE瀏覽器只能更換顏色不能設置背景顏色。

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);                         /*自定義個性鼠標*/
 }

云服務器 GPU云服務器滾動條樣式 asp 滾動條樣式你知道你應該知道

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116612.html

編寫自適應高度的 textarea

摘要：但是現在產品經理說了需要這個文本框可以根據用戶輸入內容自適應其高度。想法很簡單，當用戶輸入的文本超過了文本框自身高度時不是會出現滾動條嘛，那么自然而然就能想到這個屬性。就應該是用戶輸入文本的真實高度，至少超過文本框既定高度時是這樣。文本框是很常見的輸入控件，我相信只要寫過表單的肯定接觸過 textarea 這個元素。 OK。但是現在產品經理說了：需要這個文本框可以根據用戶輸入內容自適...

only_do 2019-08-23 15:27 評論0 收藏0
編寫自適應高度的 textarea

摘要：但是現在產品經理說了需要這個文本框可以根據用戶輸入內容自適應其高度。想法很簡單，當用戶輸入的文本超過了文本框自身高度時不是會出現滾動條嘛，那么自然而然就能想到這個屬性。就應該是用戶輸入文本的真實高度，至少超過文本框既定高度時是這樣。文本框是很常見的輸入控件，我相信只要寫過表單的肯定接觸過 textarea 這個元素。 OK。但是現在產品經理說了：需要這個文本框可以根據用戶輸入內容自適...

wenzi 2019-08-02 14:19 評論0 收藏0
修改bootstrap table 源碼實現固定高時自定義滾動條的樣式

摘要：同時在里，大概第行，有一些用來計算滾動條寬度的樣式。下面是顯示效果，分別為有滾動條時候和無滾動條時候。至此，自定義滾動條樣式就完成了。 ????????bootstrap table 其方便性與實用性已不言而喻，然，在我們實際應用中總是有這種那種的需求，比如我近期遇到的，就是需要自定義滾動條 = =，不過話說初始滾動條確實有點難看... ????????現在大多數網站滾動條都還是...

littleGrow 2019-08-29 12:40 評論0 收藏0
修改bootstrap table 源碼實現固定高時自定義滾動條的樣式

摘要：同時在里，大概第行，有一些用來計算滾動條寬度的樣式。下面是顯示效果，分別為有滾動條時候和無滾動條時候。至此，自定義滾動條樣式就完成了。 ????????bootstrap table 其方便性與實用性已不言而喻，然，在我們實際應用中總是有這種那種的需求，比如我近期遇到的，就是需要自定義滾動條 = =，不過話說初始滾動條確實有點難看... ????????現在大多數網站滾動條都還是...

anRui 2019-08-20 17:00 評論0 收藏0