1.内容过长,想要设置滚动条来滚动内容,可以给内容父级一个height,再给overflow:scorll
2.由于谷歌浏览器默认的滚动条是会自动隐藏的,想要滚动条一直固定显示,只能修改滚动条内核,代码如下
- list {
- overflow: hidden;
- overflow-y: auto;
- }
- .list::-webkit-scrollbar-track-piece {
- rgba(0, 0, 0, 0);
- border-left: 1px solid rgba(0, 0, 0, 0);
- }
- .list::-webkit-scrollbar {
- width: 5px;
- height: 13px;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- border-radius: 5px;
- }
- .list::-webkit-scrollbar-thumb {
- rgba(0, 0, 0, 0.5);
- background-clip: padding-box;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- border-radius: 5px;
- min-height: 28px;
- }
- .list::-webkit-scrollbar-thumb:hover {
- rgba(0, 0, 0, 0.5);
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- border-radius: 5px;
- }