overflow属性当页面内容超出时 修改美化滚动条样式（CSS）

overflow 属性可以控制内容溢出，将对应区域内超出部分进行隐藏或者添加滚动条。

overflow的属性：

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

对x轴自适应设置：overflow-x:auto;

对y轴隐藏设置：overflow-y:hidden;

页面HTML：

<div class="box"></div>

页面CSS样式：(一定要设置宽高，否则不生效，不会出现溢出情况)

.box{
  width: 500px;
  height: 500px;
  overflow: scroll; 

  border: 1px solid pink;
}

当纵向超出显示滚动条时，对滚动条样式进行隐藏：

//滚动条里的小方块

.box::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color:gray;
}

//滚动条整体样式
.box::-webkit-scrollbar {
  width: 5px;
  height: 5px;  //高宽分别对应横竖滚动条的尺寸
}
 //滚动条中心部分
.box::-webkit-scrollbar-track {
  background-color:pink;
}

 上述滚动条想要什么样式，根据自己的需求对应去修改即可。

将滚动条样式隐藏起来，但可以滚动

// 去除滚动条显示

        .box::-webkit-scrollbar {

          display: none

        }