flex布局，滚动条失效问题

最新推荐文章于 2024-05-11 17:30:31 发布

子龙不在常山hhh

最新推荐文章于 2024-05-11 17:30:31 发布

阅读量3.3k

点赞数

本文链接：https://blog.csdn.net/hryztt123/article/details/125168232

版权

问题描述：在flex布局中，设置了overflow：auto，没有出现滚动条

解决方案：重新设置滚动条样式

// 父元素
.noteImages {
  display: flex;
  flex-flow: row nowrap;
  overflow-x: auto;
}
// 子
.image {
  flex: 0 0  auto;
  width: 140px;
  height: 140px;
}


<style lang="stylus" scoped>
::-webkit-scrollbar {
  display: block !important;
  /* 滚动条整体样式 */
  width: 10px; /* 高宽分别对应横竖滚动条的尺寸 */
  height: 8px;
}

::-webkit-scrollbar-thumb {
  /* 滚动条里面小方块 */
  border-radius: 10px;
  // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #d3d3d3;
}

::-webkit-scrollbar-track {
  /* 滚动条里面轨道 */
  border-radius: 10px;
  background: #ededed;
}
</style>