亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

瀏覽器滾動(dòng)條樣式還可以改變，你知道嗎？

fjcgreat / 713人閱讀

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

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

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

verflow介紹

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

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

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

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

效果圖：

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

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

html部分

css樣式

這里給大家做了個(gè)圖,方便大家理解：

自定義IE瀏覽器滾動(dòng)條樣式

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

body {
   scrollbar-arrow-color: #f4ae21;                /*三角箭頭的顏色*/

   scrollbar-face-color: #333;                    /*立體滾動(dòng)條的顏色*/

   scrollbar-3dlight-color: #666;                 /*立體滾動(dòng)條亮邊的顏色*/
 
   scrollbar-highlight-color: #666;               /*滾動(dòng)條空白部分的顏色*/

   scrollbar-shadow-color: #999;                  /*立體滾動(dòng)條陰影的顏色*/

   scrollbar-darkshadow-color: #666;              /*立體滾動(dòng)條強(qiáng)陰影的顏色*/

   scrollbar-track-color: #666;                   /*立體滾動(dòng)條背景顏色*/

   scrollbar-base-color:#f8f8f8;                  /*滾動(dòng)條的基本顏色*/

   Cursor:url(mouse.cur);                         /*自定義個(gè)性鼠標(biāo)*/
 }

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/116612.html

相關(guān)文章

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

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

    only_do 評(píng)論0 收藏0

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

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

    wenzi 評(píng)論0 收藏0

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

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

    littleGrow 評(píng)論0 收藏0

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

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

    anRui 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<