html页面局部滚动效果实现方法——原生CSS

<div>
<!-- 给父标签添加一个类 -->
  <ul class="content">
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
    <li>列表5</li>
  </ul>
</div>

<style>
.content{
/*设置可见部分的高度*/
  height: 150px;
/*随便设置个颜色区分可滚动区域和其他区域*/
  background-color: red;
/*设置在竖直方向上可滚动*/
  overflow-y: scroll;
/*overflow:hidden样式可以不写,因为scroll会自动隐藏超出content高度的部分*/
}
</style>

猜你喜欢

转载自www.cnblogs.com/zhoujiayingvana/p/12578837.html