在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>