隱藏滾動條css3實現滾動同時隱藏滾動條


    1.  
      主要代碼:
        ul ::-webkit-scrollbar{ 
       display:none; 
      }
       
      white-space: nowrap;   規定段落中的文本不進行換行:
      overflow-x: auto;   

       

       
       
      案列

      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>隱藏滾動條</title>
      <style>
      ul{
      margin: 50px auto;
      padding: 0;
      width:300px;
      height:400px;
      border:solid #000 2px;
      list-style: none;
      }
      li{
      line-height:48px;
      background: yellowgreen;
      }
      ul{
      overflow-x: hidden;
      overflow-y: scroll;
      }
      ul::-webkit-scrollbar{
      display:none;
      }
      </style>
      </head>
      <body>
      <ul>
      <li>測試隱藏滾動條</li>
      <li>測試隱藏滾動條</li>
      <li>測試隱藏滾動條</li>
      <li>測試隱藏滾動條</li>
      <li>測試隱藏滾動條</li>
      <li>測試隱藏滾動條</li>
      <li>測試隱藏滾動條</li>
      <li>測試隱藏滾動條</li>
      <li>測試隱藏滾動條</li>
      <li>測試隱藏滾動條</li>
      <li>測試隱藏滾動條</li>
      <li>測試隱藏滾動條</li>
      </ul>
      </body>
      </html>

       

  • 免責聲明!

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



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