隐藏滚动条css3实现滚动同时隐藏滚动条

时间：2021-06-12 17:50:51
    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>

       
    • 标签：

    相关文章