在html中css
<div class="box"> <div>下面內容會單獨滾動</div> <div class="scroll"> <div class="content"> <p>1111111111111111</p> <p>222222222222222</p> <p>333333333333333</p> <p>4444444444444444</p> <p>1111111111111111</p> <p>222222222222222</p> <p>333333333333333</p> <p>4444444444444444</p> </div> </div> </div>
css部分 html
<style> div{ font-size: 15px; margin-bottom: 20px; } .content{ height: 300px;v // 必須設定滾動部分的高度 background-color: cadetblue; color: antiquewhite; overflow-x: hidden; /*x軸禁止滾動*/ overflow-y: scroll;/*y軸滾動*/ } .content::-webkit-scrollbar { display: none;/*隱藏滾動條*/ } p{ margin-bottom: 30px; font-size: 17px; color: #333; } </style>