overflow 设置滚动条样式

转载自晨光熹微的博客

关于 overflow 的属性

本篇文章仅以记录学习，如有不对的地方欢迎各位大佬指正，感激不尽ヾ(◍°∇°◍)ﾉﾞ

浏览器兼容性 （参考 MDN）：

代码参考：

 .container {
      width: 800px;
      height: 500px;
      overflow-x: hidden;
      overflow-y: scroll;
    }

    /* 滚动条区域的宽度 */
     .container::-webkit-scrollbar {
      width: 10px;
    }

    /* 滚动槽的样式设置 */
    .container::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.5);
    }

    /* 滚动条滑块的样式设置 */
    .container::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background: rgba(0, 0, 0, 0.1);
      -webkit-box-shadow: inset 0 0 6px rgba(39, 167, 148);
    }
    /* 滚动条滑块停止时(离开页面)的样式 */
    .container::-webkit-scrollbar-thumb:window-inactive {
      background: rgba(255, 0, 0, 0.4);
    }

<div class="container"></div>

滚动条的样式不止这一种方法，本文只示例了这种方法，因为之前没有过多了解滚动条的样式，所以弥补一下，可能会用到(๑╹◡╹)ﾉ"""

效果图 ：

正常显示时

离开页面时

样式还可以做得更好看一些，自己没事玩的时候可以再更改一下样式，记录一下