css如何实现给div添加滚动并隐藏滚动条

红太狼 2020-04-28 07:08 1010阅读 0赞

css 给div添加滚动并隐藏滚动条 ，具体代码如下所示:

在html中

  1. <div class="box">
  2.     <div>下面内容会单独滚动</div>
  3.     <div class="scroll">
  4.         <div class="content">
  5.             <p>1111111111111111</p>
  6.             <p>222222222222222</p>
  7.             <p>333333333333333</p>
  8.             <p>4444444444444444</p>
  9.             <p>1111111111111111</p>
  10.             <p>222222222222222</p>
  11.             <p>333333333333333</p>
  12.             <p>4444444444444444</p>
  13.         </div>
  14.     </div>
  15. </div>

css部分：

  1. <style>
  2.     div{
  3.         font-size: 15px;
  4.         margin-bottom: 20px;
  5.     }
  6.     .content{
  7.         height: 300px;v // 必须设定滚动部分的高度
  8.         background-color: cadetblue;
  9.         color: antiquewhite;
  10.         overflow-x: hidden; /*x轴禁止滚动*/
  11.         overflow-y: scroll;/*y轴滚动*/
  12.     }
  13.     .content::-webkit-scrollbar {
  14.         display: none;/*隐藏滚动条*/
  15.     }
  16.     p{
  17.         margin-bottom: 30px;
  18.         font-size: 17px;
  19.         color: #333;
  20.     }
  21. </style>

发表评论

表情：
评论列表 （有 0 条评论，1010人围观）

还没有评论，来说两句吧...

相关阅读