当前位置: 代码迷 >> Web前端 >> ie中改变滚动条的式样(overflow-y:auto)
  详细解决方案

ie中改变滚动条的式样(overflow-y:auto)

热度:376   发布时间:2013-11-02 19:41:10.0
ie中改变滚动条的样式(overflow-y:auto)
首先写一个div,设置宽高,overflow-x;overflow-y:auto,如图:



  <div class="s_box">
    <p>滚动条测试1</p>
    <p>滚动条测试2</p>
    <p>滚动条测试3</p>
    <p>滚动条测4试</p>
    <p>滚动条测试5</p>
    <p>滚动条测试6</p>
    <p>滚动条测试7</p>
    <p>滚动条测试8</p>
    <p>滚动条测试9</p>
    <p>滚动条测试10</p>
    <p>滚动条测试11</p>
    <p>滚动条测试12</p>
    <p>滚动条测试13</p>
    <p>滚动条测试14</p>
    <p>滚动条测试15</p>
    <p>滚动条测试16</p>
    <p>滚动条测试17</p>
    <p>滚动条测试18</p>
  </div>

然后通过css改变默认滚动条的样式

.s_box{
  width:130px;
  height:200px;
  background:#FC9;
  margin:0 auto;
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-face-color: #8e8e8e;
  scrollbar-arrow-color: #efefef;
  scrollbar-3dlight-color: #b8b19c;
  scrollbar-highlight-color: #b1b1b1;
  scrollbar-shadow-color: #898989;
  scrollbar-darkshadow-color: #898989;
  scrollbar-track-color: #ffffff;
  scrollbar-base-color: #b8b19c;
}



scrollbar-face-color: #f00;改变滚动条本身,如图:




scrollbar-arrow-color: #f00;改变小三角的颜色,如图:






scrollbar-3dlight-color: #f00;改变左侧外边线的颜色,如图:




scrollbar-highlight-color: #f00;改变左侧内边线的颜色,如图:






scrollbar-shadow-color: #f00;改变右侧内边线的颜色,如图:






scrollbar-darkshadow-color: #f00;改变右侧外边线的颜色,如图:






scrollbar-track-color: #f00;改变滚动条剩余部分的颜色,如图:






scrollbar-base-color: #b8b19c;
  相关解决方案