修改浏览器默认滚动条

Henry

2018-06-10

FrontEnd / Css

字数统计:

507字

阅读时长≈

2分

作为一个有理想的程序员, 页面好看与否直接决定了你是不是一个合格的前端, 而作为页面一部分 – 滚动条, 直接影响了页面的美观

那么如何修改滚动条的样式呢? 要么使用 js(代表者 - jQuery), 要么使用 css

关于 jQuery 滚动条插件网上一大堆, 就不介绍了

下面重点介绍通过 css 来修改原生滚动条样式

修改默认滚动条样式

注:

以下特性是非标准的，请尽量不要在生产环境中使用它！–MDN

@theme_main: #409eff;
@scroll_bg: transparent;
@scroll_width: 6px;

body,
html {
  height: 100%;
  /* 三角箭头的颜色 transparent 无效 */
  scrollbar-arrow-color: rgba(244, 244, 244, 0.1);
  /* 立体滚动条的颜色  */
  scrollbar-face-color: fade(@theme_main, 50%);
  /* 立体滚动条亮边的颜色 */
  scrollbar-3dlight-color: @scroll_bg;
  /* 滚动条空白部分的颜色   */
  scrollbar-highlight-color: @scroll_bg;
  /* 立体滚动条阴影的颜色 */
  scrollbar-shadow-color: @scroll_bg;
  /* 立体滚动条强阴影的颜色 */
  scrollbar-darkshadow-color: @scroll_bg;
  /* 立体滚动条背景颜色 */
  scrollbar-track-color: @scroll_bg;
  /* 滚动条的基本色 */
  scrollbar-base-color: @scroll_bg;
  /* 滚动条自动隐藏 */
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

/* 整个滚动条 */
::-webkit-scrollbar {
  width: @scroll_width;
  height: @scroll_width;
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 @scroll_width @scroll_bg;
  box-shadow: inset 0 0 @scroll_width @scroll_bg;
  -webkit-border-radius: @scroll_width;
  border-radius: @scroll_width;
}
/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
  background: fade(@theme_main, 50%);
  border-radius: @scroll_width;
  .enable-trans();
  &:hover {
    background: fade(@theme_main, 80%);
  }
}
/* 滚动条上的按钮 (上下箭头) */
::-webkit-scrollbar-button {
  display: none;
}
/* 当同时有垂直滚动条和水平滚动条时交汇的部分 */
::-webkit-scrollbar-corner {
  background: @scroll_bg;
}