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;
- }