兼容IE的滾動條自定義樣式


廢話不多說,直接上;

IE專屬的滾動條樣式定義,只能設置各種原始結構的顏色,寬高結構等其他樣式無法修改;

div{

   scrollbar-arrow-color: red; /*三角箭頭的顏色*/

  scrollbar-face-color: green; /* 立體滾動條的顏色(包括箭頭部分的背景色) */

  scrollbar-3dlight-color: blue; /* 立體滾動條亮邊的顏色 */

  scrollbar-highlight-color: #ddd; /* 滾動條的高亮顏色(左陰影?) */

  scrollbar-shadow-color: pink;/* 立體滾動條陰影的顏色 */

  scrollbar-darkshadow-color: #ccc;/* 立體滾動條外陰影的顏色 */

  scrollbar-track-color: orange; /* 立體滾動條背景顏色 */

  scrollbar-base-color: yellow;/* 滾動條的基色 */
 }

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

#scroll-1 div {
  width:400px;
  height:400px;
  }
#scroll-1::-webkit-scrollbar {  ::-webkit-scrollbar //滾動條整體部分,其中的屬性有width,height,background,border(就和一個塊級元素一樣)等。
  width:60px;
  height:10px;
  }
#scroll-1::-webkit-scrollbar-button{  ::-webkit-scrollbar-button //滾動條兩端的按鈕。可以用display:none讓其不顯示,也可以添加背景圖片,顏色改變顯示效果.
  background-color:black;
  }
#scroll-1::-webkit-scrollbar-track{  ::-webkit-scrollbar-track // 外層軌道。可以用display:none讓其不顯示,也可以添加背景圖片,顏色改變顯示效果。
  background:blue;
  display: none;
  }
#scroll-1::-webkit-scrollbar-track-piece {  ::-webkit-scrollbar-track-piece //內層軌道,滾動條中間部分。
  background:green;
  }
#scroll-1::-webkit-scrollbar-thumb{  ::-webkit-scrollbar-thumb //滾動條里面可以拖動的那部分,即滾動條。
  background:pink;
  border-radius:200px;
  }
#scroll-1::-webkit-scrollbar-corner {  ::-webkit-scrollbar-corner //邊角.
  background:#ddd;
  }
#scroll-1::-webkit-scrollbar-resizer {  ::-webkit-resizer //定義右下角拖動塊的樣式.
  background:red;
  }

html部分:

  <div id="scroll-1" style="width: 500px; height: 300px; border: 2px solid #1F1F1F; margin: 20px auto; overflow: auto; ">
    <div style="margin:0 auto;;height:800px;border:1px solid #ddd;width:400px;">內容部分內容部分</div>
  </div>

以上就是ie和webkit內核瀏覽器的滾動條樣式修改(個中感受自己體會)。

 

最后:

另外我還找到一種可以修改IE支持的瀏覽器的樣式的插件!試了一下,感覺還可以,只是插件內的代碼還不是很懂;

首先引入JQuery庫,再引入zUI.js這個插件,

寫入你自己修改的樣式代碼(這個選擇器應該是插件中可識別的,不是很懂,但能用):

.zUIpanelScrollBox,.zUIpanelScrollBar{
  width:10px;
  top:4px;
  right:2px;
  border-radius:5px;
}
.zUIpanelScrollBox{
  background:black;opacity:0.1;
  filter:alpha(opacity=10);
}
.zUIpanelScrollBar{
  background:red;opacity:0.8;
  filter:alpha(opacity=80);
}

最后對插件進行初始化即可

  $(function(){
    $("#scroll-1").panel({iWheelStep:32});
   });

  iWheelStep:32;滾動條滾動的速度,可修改。

火狐的暫時還沒有兼容到,后期學習到再補上。

 (PS:一起學習,共同進步!有不對的地方希望大佬們幫忙糾正,萬分感謝!)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM