搜索
  • 如何修改浏览器滚动条的默认样式？
  • 发布于 2个月前
  • 277 热度
    0 评论

前言：

浏览器默认的滚动条样式很是难看，如果我们想要修改浏览器滚动条的样式该怎么做呢？今天我们就用纯CSS实现一个自定义的浏览器滚动条效果。

示例 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>堆代码 duidaima.com</title>
  <style type="text/css">
    /** 更改滚动条样式 */
    /* 滚动条的样式 */
    ::-webkit-scrollbar {
      width: 10px;
    }
    /* 滚动条的打底的样式 */
    ::-webkit-scrollbar-track {
      background: red;
      border-radius: 5px;
    }
    /* 滚动条的滑块的样式 */
    ::-webkit-scrollbar-thumb {
      background: gold;
      border-radius: 5px;
    }
    /* 上部分按钮的样式 */
    ::-webkit-scrollbar-button:start {
      height: 10px;
      background: #CCC;
    }
    /* 下部分按钮的样式 */
    ::-webkit-scrollbar-button:end {
      height: 10px;
      background: #CCC;
    }

    .pa {
      width: 200px;
      height: 200px;
      background-color: aqua;
      overflow: auto;
    }
</style>
</head>
<body>
  <div class="pa">
    <div>堆代码 duidaima.com</div>
    <div>堆代码 duidaima.com</div>
    <div>堆代码 duidaima.com</div>
    <div>堆代码 duidaima.com</div>
    <div>堆代码 duidaima.com</div>
    <div>堆代码 duidaima.com</div>
    <div>堆代码 duidaima.com</div>
    <div>堆代码 duidaima.com</div>
    <div>堆代码 duidaima.com</div>
    <div>堆代码 duidaima.com</div>
    <div>堆代码 duidaima.com</div>
    <div>堆代码 duidaima.com</div>
  </div>
</body>
</html>
效果图片

小知识
设置四角为钝角
可以对::-webkit-scrollbar-thumb添加border-radius样式来设置打底的四角的弧度（注意：设置四角弧度后，滚动条的四角会漏出当前所属滚动元素的背景颜色）同理，可以对::-webkit-scrollbar-track添加border-radius样式来设置滑块的四角的弧度。
用户评论
可能感兴趣的话题