移動端滾動條


1.內容過長,想要設置滾動條來滾動內容,可以給內容父級一個height,再給overflow:scorll

2.由於谷歌瀏覽器默認的滾動條是會自動隱藏的,想要滾動條一直固定顯示,只能修改滾動條內核,代碼如下

  1. list {  
  2.     overflow: hidden;  
  3.     overflow-y: auto;  
  4. }  
  5. .list::-webkit-scrollbar-track-piece {  
  6.     rgba(0, 0, 0, 0);  
  7.     border-left: 1px solid rgba(0, 0, 0, 0);  
  8. }  
  9. .list::-webkit-scrollbar {  
  10.     width: 5px;  
  11.     height: 13px;  
  12.     -webkit-border-radius: 5px;  
  13.     -moz-border-radius: 5px;  
  14.     border-radius: 5px;  
  15. }  
  16. .list::-webkit-scrollbar-thumb {  
  17.     rgba(0, 0, 0, 0.5);  
  18.     background-clip: padding-box;  
  19.     -webkit-border-radius: 5px;  
  20.     -moz-border-radius: 5px;  
  21.     border-radius: 5px;  
  22.     min-height: 28px;  
  23. }  
  24. .list::-webkit-scrollbar-thumb:hover {  
  25.     rgba(0, 0, 0, 0.5);  
  26.     -webkit-border-radius: 5px;  
  27.     -moz-border-radius: 5px;  
  28.     border-radius: 5px;  
  29. }  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM