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>

 

posted @ 2020-12-04 17:39  等风来灬  阅读(274)  评论(0)  编辑  收藏  举报