隐藏滚动条或更改滚动条样式

本文主要是介绍隐藏滚动条或更改滚动条样式，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

隐藏滚动条或更改滚动条样式

滚动条隐藏

/*chrome 和Safari*/
.scroll-container::-webkit-scrollbar {
    display: none;
    /* width: 0; */
}

.scroll-container {
    -ms-overflow-style: none;   /*IE 10+*/
    scrollbar-width: none; /*firefox*/
}

更改滚动条样式

• ie、火狐不支持

.scroll-container {
    width: 500px;
    height: 150px;
    border: 1px solid #ddd;
    padding: 15px;
    overflow: auto; /*必须*/
}

.scroll-container::-webkit-scrollbar {
    width: 8px;
    background: white;
}

.scroll-container::-webkit-scrollbar-corner,
.scroll-container::-webkit-scrollbar-thumb,
.scroll-container::-webkit-scrollbar-track {
    border-radius: 4px;
}
/* 滚动条轨道样式*/
.scroll-container::-webkit-scrollbar-corner,
.scroll-container::-webkit-scrollbar-track { 
  
    background-color: rgba(180, 160, 120, 0.1);
    box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
}
/* 滚动条手柄 */
.scroll-container::-webkit-scrollbar-thumb {
    background-color: #00adb5;
}

CSS3自定义webkit滚动条样式

这篇关于隐藏滚动条或更改滚动条样式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！