浏览器滚动条样式还能够改变，你知道吗？

时间 2019-12-13

原文原文链接

有时候，咱们是否是以为浏览器默认的滚动条很low，那么浏览器滚动条样式可否改变呢，答案是确定的，今天就给你们分享一下怎么改变浏览器的默认滚动条，让咱们的页面更加炫酷。css

在次以前，咱们先来了解一下滚动条产生的缘由，通俗的来说就是内容超出容器就会出现滚动条。html

verflow介绍

<h5>定义：overflow 属性指定当它溢出其块级容器时,是否剪辑内容，渲染滚动条或显示内容。
属性值web

overflow:visible    //默认值。内容不会被修剪，超出内容会显示在元素框以外
overflow:hidden     //内容会被修剪。超出内容被隐藏
overflow:scroll     //内容会被修剪，浏览器会显示滚动条以便查看其他内容
overflow:auto       //若是内容被修剪，则浏览器会显示滚动条以便查看其他的内容
overflow:inherit    //规定从该父元素继承overflow属性的值`

注：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
当overflow设为除默认值（visible）之外的值时，将会建立一个会块级式化上下文（清除浮动的一种方式），更多可查看深刻理解BFC和Margin Collapse浏览器

下面直接进入教程，以Google浏览器为例：

效果图：url

webkit内核的浏览器滚动条样式

首先给两个div，两个div是父子关系，里面的div宽高比外面的宽高值大，再加上overflow：hidd属性模拟出现滚动条效果，而后进行css更改样式。 spa

html部分 3d

<style>
    #scrollbar {
        width:300px;
        height:300px;
        overflow:auto;
        float: left;
    }
    #scrollbar div {
        width:800px;
        height:2000px;
    }
</style>
<body>
    <div id='scrollbar'>    
        <div ></div>   
    </div>
</body>

css样式code

<style>
    #scrollbar::-webkit-scrollbar             {   滚动条总体部分，其中的属性有width,height,background,border（就和一个块级元素同样）等。
        width:12px;
        height:12px;
    }
    #scrollbar::-webkit-scrollbar-button      {   滚动条两端的按钮。能够用display:none让其不显示，也能够添加背景图片，颜色改变显示效果。
        width:12px;
        height:12px;
    }
    #scrollbar::-webkit-scrollbar-track       {   外层轨道。能够用display:none让其不显示，也能够添加背景图片，颜色改变显示效果。
      background: #232428;
      border-radius: 20px;

    }
    #scrollbar::-webkit-scrollbar-track-piece {   内层轨道，滚动条中间部分（除去）。
      background: #232428;
      border-radius: 20px;
    }
    #scrollbar::-webkit-scrollbar-thumb       {   滚动条里面能够拖动的那部分
        background:#85868B;
        border-radius:50px;
    }
    #scrollbar::-webkit-scrollbar-corner      {   边角
        background:#fff;
    }
    #scrollbar::-webkit-scrollbar-resizer     {   定义右下角拖动块的样式
        background:#fff; 
    }
  </style>

这里给你们作了个图,方便你们理解：htm

自定义IE浏览器滚动条样式

IE浏览器，就比较简单了，直接定义整个页面的滚动条，但IE浏览器只能更换颜色不能设置背景颜色。继承

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);                         /*自定义个性鼠标*/
 }