CSS：x轴/y轴溢出隐藏

2022-11-16 周三

overflow文档地址

使用overflow: scroll，超出部分将隐藏，并显示滚动条，分别可以设置x轴和y轴的滚动条。

注意：如果设置x轴的滚动条，需要限定宽度；设置y轴的滚动条，需要限定高度。

HTML

<div class="box">
  <div v-for="(item,index) in list" :key="index" class="item"></div>
</div>

CSS

.item{
  width:100px;
  height:100px;
  background:blue;
}

x轴

.box{
  width:500px;
  overflow-x: scroll;
  white-space: nowrap;
}

y轴

  .box{
    height:500px;
    overflow-x: hidden;
    overflow-y: scroll;
}