成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

fjcgreat / 672人閱讀

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

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

在次之前，我們先來了解一下滾動條產(chǎn)生的原因，通俗的來講就是內(nèi)容超出容器就會出現(xiàn)滾動條。

verflow介紹

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

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

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

下面直接進(jìn)入教程，以Google瀏覽器為例：

效果圖：

webkit內(nèi)核的瀏覽器滾動條樣式

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

html部分

css樣式

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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116612.html

相關(guān)文章

  • 編寫自適應(yīng)高度的 textarea

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

    only_do 評論0 收藏0

  • 編寫自適應(yīng)高度的 textarea

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

    wenzi 評論0 收藏0

  • 修改bootstrap table 源碼實現(xiàn)固定高時自定義滾動條的樣式

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

    littleGrow 評論0 收藏0

  • 修改bootstrap table 源碼實現(xiàn)固定高時自定義滾動條的樣式

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

    anRui 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<