CSS滚动条有关问题

<div class="scroll innerbox">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
</div>

CSS设置元素可以滚动但不显示滚动条

.scroll {
    width: 100px;
    height: 50px;
    background-color: aqua;
    overflow-y:scroll;   //设置元素滚动
    //overflow: auto;
}
//不显示滚动条
::-webkit-scrollbar {
    width: 0;
    height: 0;
    background-color: transparent;
}

滚动条样式的属性

注意：滚动条样式的修改是通过伪元素实现的

::-webkit-scrollbar         滚动条整体部分
::-webkit-scrollbar-button  滚动条两端的按钮 （设置滚动条整体样式,两端按钮图标消失,可重新设置图片、新样式）
::-webkit-scrollbar-track   外层轨道
::-webkit-scrollbar-track-piece 内层轨道 （覆盖外层轨道 scrollbar-track 的样式）
 
::-webkit-scrollbar-thumb                    内嵌滑块
::-webkit-scrollbar-thumb:hover              滑块悬浮
::-webkit-scrollbar-thumb:vertical:hover   纵向滑块悬浮
::-webkit-scrollbar-thumb:horizontal:hover 横向滑块悬浮
 
::-webkit-scrollbar-corner      边角
::-webkit-resizer               定义右下角拖动块的样式

CSS修改页面滚动条的样式

// 滚动条整体样式
.innerbox::-webkit-scrollbar{
  width: 4px;
}
// 滚动条内嵌滑块
.innerbox::-webkit-scrollbar-thumb{
  border-radius: 10px;
  background: rgba(0,0,0,0.2);
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
}
// 滚动条边角
.innerbox::-webkit-scrollbar-corner{
  border-radius: 0;
  background: rgba(0,0,0,0.1);
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
}