修改浏览器滚动条样式

一、设置全局滚动条隐藏

	::-webkit-scrollbar {
	  display: none;
	}

二、滚动条样式修改宽度

要想更改滚动条样式，我们需要对::-webkit-scrollbar进行样式调整，其中涉及到以下三个元素：

• 滚动条本身：::-webkit-scrollbar
• 滚动条轨道：::-webkit-scrollbar-track
• 滑块：::-webkit-scrollbar-thumb

下面是对应的代码示例：

	/* 滚动条样式 */
	::-webkit-scrollbar {
	    width: 8px;
	}
	/* 滑块样式 */
	::-webkit-scrollbar-thumb {
	   background-color: #888;
	   border-radius: 10px;
	}
	/* 滚动条轨道样式 */
	::-webkit-scrollbar-track {
	   background-color: #f2f2f2;
	   border-radius: 10px;
	}

三、更改滚动条样式

    /* 滚动条样式 */
    ::-webkit-scrollbar {
        width: 6px;
    }
    /* 滑块样式 */
    ::-webkit-scrollbar-thumb{
        background-color: #9f9f9f; 
        border-radius: 10px;
    }
    /* 滚动条轨道样式 */
    ::-webkit-scrollbar-track{
        background-color: #fcfcfc;
        border-radius: 10px;
    }

四、更改轨道条样式

    /* 滚动条样式 */
    ::-webkit-scrollbar {
        width: 6px;
    }
    /* 滑块样式 */
    ::-webkit-scrollbar-thumb{
        background-color: #9f9f9f; 
        border-radius: 10px;
    }
    /* 滚动条轨道样式 */
    ::-webkit-scrollbar-track{
        background-color: #fcfcfc;
        border-radius: 10px;
    }

五、修改滚动条上下按钮

::-webkit-scrollbar-button {
  
}