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

最新推荐文章于 2021-01-10 06:26:35 发布

weixin_33946605

最新推荐文章于 2021-01-10 06:26:35 发布

阅读量213

点赞数

原文链接：https://segmentfault.com/a/1190000011335603

版权

有时候，我们是不是觉得浏览器默认的滚动条很low，那么浏览器滚动条样式能否改变呢，答案是肯定的，今天就给大家分享一下怎么改变浏览器的默认滚动条，让我们的页面更加炫酷。

在次之前，我们先来了解一下滚动条产生的原因，通俗的来讲就是内容超出容器就会出现滚动条。

verflow介绍

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

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

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

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

效果图：

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

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

html部分

<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样式

<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>

这里给大家做了个图,方便大家理解：

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

weixin_33946605

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器滚动条样式还可以改变，你知道吗？

有时候，我们是不是觉得浏览器默认的滚动条很low，那么浏览器滚动条样式能否改变呢，答案是肯定的，今天就给大家分享一下怎么改变浏览器的默认滚动条，让我们的页面更加炫酷。在次之前，我们先来了解一下滚动条产生的原因，通俗的来讲就是内容超出容器就会出现滚动条。verflow介绍<h5>定义：overflow 属性指定当它溢出其...
复制链接

扫一扫

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

verflow介绍

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

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

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

“相关推荐”对你有帮助么？