前端自定义设置各浏览器滚动条scrollbar样式的方法-CFANZ编程社区

有时候项目里 UI 的需求是改滚动条的样式，css 就可以改

下面这篇文章主要就是介绍了前端如何来修改各大浏览器的滚动条样式，首先要知道，修改滚动条样式，其一是利用伪元素 -webkit-scrollbar 。下面来看看文章内容的具体实现吧

谷歌浏览器

首先要知道，修改滚动条样式，利用伪元素 -webkit-scrollbar 。

注意， ::-webkit-scrollbar 仅仅支持 WebKit 的浏览器

( 例如谷歌 Chrome 、苹果 Safari ) 。

火狐浏览器

实测以上代码并不起作用。但也可能是我的浏览器的版本不对吧！可以自行试试

Firefox

火狐 64 位目前只提供了部分自定义滚动条的属性：

如果只是修改样式的，IE 算是没辙了，但是 firefox 还有救。

我的折中方式是，把 chrome 的样式设置和 firefox 一样。

代码：

/**
描述：自定义浏览器滚动条样式。

示例：如 my-div 需要使用自定义滚动条，直接如下写法。

.my-div {
    overflow: auto;
    @import '../../commons/css/custom_scroll.less';
}

注意：元素需要使用 `overflow:hidden ` 属性。

兼容性：兼容chrome和firefox，不兼容IE

 */


&::-webkit-scrollbar {
  width: 6px;
  background-color: #eee;
}

&::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;

  &:hover {
    background-color: #a8a8a8;
  }

  &:active {
    background-color: #787878;
  }
}

& {
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #eee;
}

IE 浏览器

对于 IE ，目前只能找到修改滚动条各种属性的颜色，未找到修改样式的地方。

具体可修改的颜色如下：

有个表格看的清楚：

代码：

.ie-div {
   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; /*滚动条的基本颜色*/ 
}

body {
  /* 滚动条颜色 */
  scrollbar-face-color: red;
  /* 滚动条的边框 */
  scrollbar-shadow-color: blue;
  /* 浏览器滚动条背景色 */
  scrollbar-track-color: pink;
  /* 滚动条向上向下指示箭头颜色 */
  scrollbar-arrow-color: cyan;
}

使用插件

比较好用的插件：

JQuery Custom Scrollbar
Perfect Scrollbar：只有6K大小。