国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

如何自定義CSS滾動條的樣式？

leonardofed / 2243人閱讀

摘要：需求有的時候我們不想使用瀏覽器默認的滾動條樣式，因為不夠定制化和美觀。可設置豎直水平方向的滾動條可以設置水平方向的滾動條，不加默認是豎直方向。自定義滾動條樣式可自定義的樣式比較少，只能控制滾動條各個部分顯示的顏色，定制性較低。

歡迎大家前往騰訊云+社區，獲取更多騰訊海量技術實踐干貨哦~

本文由前端林子發表

本文會介紹CSS滾動條選擇器，并在demo中展示如何在Webkit內核瀏覽器和IE瀏覽器中，自定義一個橫向以及一個縱向的滾動條。

0.需求

有的時候我們不想使用瀏覽器默認的滾動條樣式，因為不夠定制化和美觀。那么如何自定義滾動條的樣式呢？下面一起來看看吧。

1 基礎知識 1.1 Webkit內核的css滾動條選擇器

::-webkit-scrollbar CSS偽類選擇器影響了一個元素的滾動條的樣式

屬性：

::-webkit-scrollbar — 整個滾動條

::-webkit-scrollbar-track — 滾動條軌道

::-webkit-scrollbar-thumb — 滾動條上的滾動滑塊

::-webkit-scrollbar-button — 滾動條上的按鈕 (上下箭頭)

::-webkit-scrollbar-track-piece — 滾動條沒有滑塊的軌道部分

::-webkit-scrollbar-corner — 邊角，即當同時有垂直滾動條和水平滾動條時交匯的部分

::-webkit-resizer — 某些元素的corner部分的部分樣式(例:textarea的可拖動按鈕)

注意：

(1)瀏覽器的支持情況：

::-webkit-scrollbar 僅僅在支持Webkit的瀏覽器 (Chrome, Safari)可以使用。

(2)可設置豎直/水平方向的滾動條

可以設置水平方向的滾動條(:horizontal)，不加默認是豎直方向(:vertical)。

(3)滾動條上的按鈕（:decrement、:increment）

可以設置圖片，這點會在下面demo中展示。

1.2 IE自定義滾動條樣式

可自定義的樣式比較少，只能控制滾動條各個部分顯示的顏色，定制性較低。這里我只列舉了部分樣式，諸如scrollbar-3dlight-color、scrollbar-highlight-color等樣式試了下沒有效果，這里不再列出：

scrollbar-arrow-color — 滾動條三角箭頭的顏色 scrollbar-face-color — 滾動條上滾動滑塊顏色

scrollbar-track-color— 滾動條軌道、按鈕背景的顏色 scrollbar-shadow-color— 滾動框上滑塊邊框的顏色

2.demo快速上手 2.1 Webkit內核的瀏覽器自定義滾動條樣式 (chrome, safari)

如果覺得上述說明有些抽象，可以直接在瀏覽器中打開demo，結合demo中的注釋來理解各個屬性的意義。圖中我對其中的一些屬性做了標注，滾動條外層軌道屬性并未在圖中標注，可打開chrome瀏覽器控制臺查看屬性：





  
  scrollbar的demo--lynnshen
  
  



  

    

      內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
      內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
      內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
      內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容

實現效果：

WebKit內核的瀏覽器

說明：

(1)滾動條兩端的按鈕使用的圖片，四個角分別使用了四張圖片;

(2).scolltable實現了水平垂直居中的效果，具體方法是：使用絕對對位，將元素的定點定位到body的中心。然后使用負margin（即元素寬高的一半）將其拉回到body的中心。

2.2 IE自定義滾動條樣式 




  
  scrollbar for IE--lynnshen
  
  



  

    

      內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
      內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
      內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
      內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容

實現效果：

IE

3.小結

本文主要是想記錄下在Webkit內核的瀏覽器和IE中，如何自定義滾動條的樣式，并分別提供了兩個demo。如有問題，歡迎指正。

此文已由作者授權騰訊云+社區發布，更多原文請點擊

搜索關注公眾號「云加社區」，第一時間獲取技術干貨，關注后回復1024 送你一份技術課程大禮包！

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

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

相關文章

  • 如何自定義CSS滾動條的樣式？

    摘要：需求有的時候我們不想使用瀏覽器默認的滾動條樣式，因為不夠定制化和美觀。可設置豎直水平方向的滾動條可以設置水平方向的滾動條，不加默認是豎直方向。自定義滾動條樣式可自定義的樣式比較少，只能控制滾動條各個部分顯示的顏色，定制性較低。 歡迎大家前往騰訊云+社區，獲取更多騰訊海量技術實踐干貨哦~ 本文由前端林子發表 本文會介紹CSS滾動條選擇器，并在demo中展示如何在Webkit內核瀏覽器和I...

    linkFly 評論0 收藏0

  • 如何自定義CSS滾動條的樣式？

    摘要：可設置豎直水平方向的滾動條可以設置水平方向的滾動條，不加默認是豎直方向。自定義滾動條樣式自定義滾動條樣式可自定義的樣式比較少，只能控制滾動條各個部分顯示的顏色，定制性較低。歡迎大家前往騰訊云+社區，獲取更多騰訊海量技術實踐干貨哦~ 本文由前端林子發表 本文會介紹CSS滾動條選擇器，并在demo中展示如何在Webkit內核瀏覽器和IE瀏覽器中，自定義一個橫向以及一個縱向的滾動條。 0.需求...

    kviccn 評論0 收藏0

  • css scrollbar樣式設置

    摘要：表示遞增的按鈕或軌道碎片，例如可以使區域向下或者向左移動的區域和按鈕適用于按鈕和軌道碎片。判斷軌道結束的位置是否是一對按鈕。 一 前言 在CSS 中，如果我們在塊級容器上設置了屬性: overflow:scroll /* x y 方向都會*/ 或者 overflow-x:scroll /*只是x方向*/ 或者 overflow-y:scroll /*只是y方向*/ 當塊級內容區域...

    104828720 評論0 收藏0

  • css scrollbar樣式設置

    摘要：表示遞增的按鈕或軌道碎片，例如可以使區域向下或者向左移動的區域和按鈕適用于按鈕和軌道碎片。判斷軌道結束的位置是否是一對按鈕。 一 前言 在CSS 中，如果我們在塊級容器上設置了屬性: overflow:scroll /* x y 方向都會*/ 或者 overflow-x:scroll /*只是x方向*/ 或者 overflow-y:scroll /*只是y方向*/ 當塊級內容區域...

    張春雷 評論0 收藏0

  • CSS進階篇--設置滾動條樣式

    摘要：用于所有滾動條軌道，指示滾動條圓角是否顯示。用于所有的滾動條軌道，指示應用滾動條的某個頁面容器元素是否當前被激活。 因為在現在的大部分項目中很多都用到了滾動條，有時候用到模擬的滾動條，現在說下滾動條的CSS也能解決。 比如網易郵箱的滾動條樣子很好看，就是利用的CSS來設置的，而且是webkit瀏覽器的。如圖所示： showImg(https://segmentfault.com/img...

    elva 評論0 收藏0

發表評論

0條評論

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