pc端滚动条美化

html部分：

    <ul class="scroll-bar">
        <li data-code="110000" data-id="35" title="北京市">北京市</li>
        <li data-code="120000" data-id="36" title="天津市">天津市</li>
        <li data-code="130000" data-id="37" title="河北省">河北省</li>
        <li data-code="140000" data-id="38" title="山西省">山西省</li>
        <li data-code="150000" data-id="39" title="内蒙古自治区">
          内蒙古自治区
        </li>
        <li data-code="210000" data-id="40" title="辽宁省">辽宁省</li>
        <li data-code="220000" data-id="41" title="吉林省">吉林省</li>
        <li data-code="230000" data-id="42" title="黑龙江省">黑龙江省</li>
        <li data-code="310000" data-id="43" title="上海市">上海市</li>
        <li data-code="320000" data-id="44" title="江苏省">江苏省</li>
        <li data-code="330000" data-id="45" title="浙江省">浙江省</li>
        <li data-code="340000" data-id="46" title="安徽省">安徽省</li>
        <li data-code="350000" data-id="47" title="福建省">福建省</li>
        <li data-code="360000" data-id="48" title="江西省">江西省</li>
        <li data-code="370000" data-id="49" title="山东省">山东省</li>
        <li data-code="410000" data-id="50" title="河南省">河南省</li>
        <li data-code="420000" data-id="51" title="湖北省">湖北省</li>
        <li data-code="430000" data-id="52" title="湖南省">湖南省</li>
        <li data-code="440000" data-id="53" title="广东省">广东省</li>
        <li data-code="450000" data-id="54" title="广西壮族自治区">
          广西壮族自治区
        </li>
        <li data-code="460000" data-id="55" title="海南省">海南省</li>
        <li data-code="500000" data-id="56" title="重庆市">重庆市</li>
        <li data-code="510000" data-id="57" title="四川省">四川省</li>
        <li data-code="520000" data-id="58" title="贵州省">贵州省</li>
        <li data-code="530000" data-id="59" title="云南省">云南省</li>
        <li data-code="540000" data-id="60" title="西藏自治区">西藏自治区</li>
        <li data-code="610000" data-id="61" title="陕西省">陕西省</li>
        <li data-code="620000" data-id="62" title="甘肃省">甘肃省</li>
        <li data-code="630000" data-id="63" title="青海省">青海省</li>
        <li data-code="640000" data-id="64" title="宁夏回族自治区">
          宁夏回族自治区
        </li>
        <li data-code="650000" data-id="65" title="新疆维吾尔自治区">
          新疆维吾尔自治区
        </li>
        <li data-code="710000" data-id="68" title="台湾省">台湾省</li>
        <li data-code="810000" data-id="66" title="香港特别行政区">
          香港特别行政区
        </li>
        <li data-code="820000" data-id="67" title="澳门特别行政区">
          澳门特别行政区
        </li>
      </ul>

css部分：

.scroll-bar {
  overflow: auto;
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    /*高宽分别对应横竖滚动条的尺寸*/
    width: 6px;
    height: 1px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background: #ccc;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 10px;
    background: #fff;
  }
}

展示：