webkit内核浏览器滚动条设置

最新推荐文章于 2024-04-17 18:26:25 发布

阿保大哥

最新推荐文章于 2024-04-17 18:26:25 发布

阅读量666

点赞数

分类专栏： css

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

overflow: auto; 在需要时内容会自动添加滚动条

overflow: scroll; 总是显示滚动条

overflow-x: hidden; 禁止横向的滚动条

overflow-y: scroll; 总是显示纵向滚动条

width: 568px; width: 98%; 设置区域的宽度[像素/百分比等等]

height: 120px; 设置区域的高度[像素/百分比等等]

<span style="font-size:14px;"><STYLE>
BODY {
   SCROLLBAR-FACE-COLOR: #f892cc; 
   SCROLLBAR-HIGHLIGHT-COLOR: #f256c6;
  SCROLLBAR-SHADOW-COLOR: #fd76c2; 
   SCROLLBAR-3DLIGHT-COLOR: #fd76c2; 
   SCROLLBAR-ARROW-COLOR: #fd76c2;
  SCROLLBAR-TRACK-COLOR: #fd76c2; 
   SCROLLBAR-DARKSHADOW-COLOR: #f629b9;
  SCROLLBAR-BASE-COLOR: #e9cfe0
}
</STYLE></span>

SCROLLBAR-FACE-COLOR: 滚动条凸出部分的颜色

SCROLLBAR-HIGHLIGHT-COLOR: 滚动条空白部分的颜色

SCROLLBAR-SHADOW-COLOR: 立体滚动条阴影的颜色

SCROLLBAR-3DLIGHT-COLOR: 滚动条亮边的颜色

SCROLLBAR-ARROW-COLOR: 上下按钮上三角箭头的颜色

SCROLLBAR-TRACK-COLOR: 滚动条的背景颜色

SCROLLBAR-DARKSHADOW-COLOR: 滚动条强阴影的颜色

SCROLLBAR-BASE-COLOR: 滚动条的基本颜色自己定义滚动条的颜色。

一般默认的滚动条样式如下左图,右图是放大了1600倍的样子，我们可以看到滚动条有几种言责组合的,我给他们标了7个号，分别注释在下面的css代码的后面了，注意css的注释代码是放在两个斜杠内的两个星号之间。

如:

<span style="font-size:14px;">/*这里放注释的代码*/
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); /*自定义个性鼠标*/ 
}</span>

以上2项适用与<body>、<div>、<textarea>、<iframe>希望对你有所帮助。

自定义滚动条(webkit系列)

Thumb: 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）。This is the piece that shows you where you are in the scrollbar. This is the chap that you can move around
Track: 滚动条的轨道（里面装有Thumb）。This is the area of the scrollbar that you can move the thumb up and down, or along (depending on the orientation). There is both the area between the top and the thumb, and between the bottom of the thumb and the bottom of the scrollbar
Buttons: 滚动条的轨道的两端，允许通过点击微调小方块的位置。There may be buttons that you can click to increment or decrement the selection (which moves the thumb). There are various styles (single button, double button, etc)
Corner: 两个滚动条的交汇处。This area may show up with both horizontal and vertical scrollbars open
Resizer: 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件。This can change the are of the element (e.g. enlarge of shrink)

<span style="font-size:14px;"><!doctype html>
<html>
  <head>
    <title>自定义滚动条 by 司徒正美</title>
 
  </head>
  <body>
  <style>
    /* Turn on a 13x13 scrollbar */
    ::-webkit-scrollbar {
      width: 13px;/*对垂直流动条有效*/
      height: 13px;/*对水平流动条有效*/
    }
    /*垂直滚动条的按钮*/
    ::-webkit-scrollbar-button:vertical {
      background-color: red;
      border: 1px dashed blue;
    }
    /*CSS的坐标系，左上角为(0,0),往右往下为增加，往上往左为减少*/
    /*显示滚动条上方的渐增按钮*/
    ::-webkit-scrollbar-button:start:decrement,
    /*显示滚动条上方的渐减按钮*/
    ::-webkit-scrollbar-button:end:increment {
      display: block
    }
 
    /*隐藏滚动条上方的渐增按钮*/
    ::-webkit-scrollbar-button:vertical:start:increment,
    ::-webkit-scrollbar-button:vertical:end:decrement {
      display: none;
 
    }
 
    /* 定义垂直滚动条渐增按扭的样式 */
    ::-webkit-scrollbar-button:vertical:increment {
      background-color: white;
      border: 1px dashed blue;
    }
 
    /* 定义垂直滚动条渐减按扭的样式 */
    ::-webkit-scrollbar-button:vertical:decrement {
      background-color: purple;
      border: 1px dashed blue;
    }
    /*　　scrollbar-track　　　　上面是　scrollbar-track-piece　　*/
    /*　　scrollbar-track-piece　上面是　四个按扭与scrollbar-track-piece:start与scrollbar-track-piece:end与scrollbar-thumb　*/
    /* 垂直滚动条的第一层轨道*/
    ::-webkit-scrollbar-track:vertical {
      background-color: blue;
      border: 1px dashed pink;
    }
 
 
    /* 垂直滚动条的第二层轨道　*/
    ::-webkit-scrollbar-track-piece {
      background-color: green;
    }
    /* 垂直滚动条的第三层轨道的上段　*/
    ::-webkit-scrollbar-track-piece:vertical:start {
      border: 1px solid #000;
    }
 
    /* 垂直滚动条的第三层轨道的下段　*/
    ::-webkit-scrollbar-track-piece:vertical:end {
      border: 1px dashed pink;
    }
 
    /* 垂直滚动条的滑动块 */
    ::-webkit-scrollbar-thumb:vertical {
      height: 50px;
      background-color: yellow;
    }
 
    /* Corner */
    ::-webkit-scrollbar-corner:vertical {
      background-color: black;
    }
    /*  http://www.cssportal.com/css-properties/resize.htm  */
    /* Resizer */
    ::-webkit-scrollbar-resizer:vertical {
      background-color:orange;
    }
  </style>
 
 
  <div style="width:200px;height: 200px;overflow: scroll;resize:both;">
    <div style="background: red;width:400px;height: 400px;"></div>
  </div>
</body>
</html></span>

http://zhidao.baidu.com/link?url=RbtWQusPjR7gXiIlh-hvnr8hTg5u8km_BszYCHPv0dbWNySPzAjjXGFH5r431BYp_hfFSKSSx_gsntcn5E35IXHl-vePMVn1qUbUEVEU0-i

阿保大哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webkit内核浏览器滚动条设置

overflow: auto; 在需要时内容会自动添加滚动条overflow: scroll; 总是显示滚动条overflow-x: hidden; 禁止横向的滚动条overflow-y: scroll; 总是显示纵向滚动条width: 568px; width: 98%; 设置区域的宽度[像素/百分比等等]height: 120px; 设置区域的高度[像素/百分比等等]
复制链接

扫一扫