1、
overflow:hidden;
overflow:scroll;
2、
If you want a horizontal scrollbar to appear then: overflow-x:auto
If you want a vertical scroll bar: overflow-y:auto
Note: Be sure to set the width and height
width:400px; height:400px;
3. Solid color scroll bar
/* 整个滚动条 */
::-webkit-scrollbar {
/* 对应纵向滚动条的宽度 */
width: 10px;
/* 对应横向滚动条的宽度 */
height: 10px;
}
/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
background-color: #49b1f5;
border-radius: 32px;
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
background-color: #dbeffd;
border-radius: 32px;
}
4. Color scroll bar
/* 整个滚动条 */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
background-color: #49b1f5;
/* 关键代码 */
background-image: -webkit-linear-gradient(45deg,
rgba(255, 255, 255, 0.4) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.4) 50%,
rgba(255, 255, 255, 0.4) 75%,
transparent 75%,
transparent);
border-radius: 32px;
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
background-color: #dbeffd;
border-radius: 32px;
}
Reference link: