滚动条设置

滚动条

滚动条是否显示

**1添加滚动条 **

1）overflow：scroll 与或overflow：auto

2）-webkit-scrollbar 不设置滚动条宽度也不会显示

overflow：scroll 与 overflow：auto的区别

overflow:scroll – 一直有滚动的盒子，只是超出了盒子才会出现滚动条滑块，可以滚动

overflow:auto – 只有超出了盒子才会有滚动条

2去除滚动条

::-webkit-scrollbar {
    width: 0;
    height:0;
    /*或直接写*/
    display:none;
}

滚动条样式设置

针对webkit内核的浏览器，使用伪类来改变滚动条的默认样式

::-webkit-scrollbar 滚动条整体部分

::-webkit-scrollbar-thumb 滚动条滑块

::-webkit-scrollbar-track 滚动条的轨道

::-webkit-scrollbar-button 滚动条的轨道的两端按钮，点击它也可以滚动

  ::-webkit-scrollbar {

    width: 10px; //滚动条的宽度设置

  }

  ::-webkit-scrollbar-thumb {

    background-color: rgb(59, 182, 225); //滚动条滑块颜色

    transition: all 0.2s;

    border-radius: 6px;

  }

  ::-webkit-scrollbar-thumb:hover {

    background-color: #2b85e0;

  }

  ::-webkit-scrollbar-track {

    background-color: #f5f5f5; // 滑道的背景色

  }

  ::-webkit-scrollbar-button {

    height: 6px;

    background-color: #ccc;

  }

滚动条滑块的长度好像不可以设置，自动适应，之前还查了很久这个