子元素宽度不确定的情况下横向滚动的css实现方式

子元素宽度不确定的情况下实现横向滚动

开发中经常会遇到横向滚动的需求，有时是已经确定了子元素个数（父元素的宽度自然也就确定），给父元素的父盒子设置overflow: scroll/auto即可。

一、子元素的数量不确定导致宽度不确定。

1. js实现，首先获取子元素的个数，计算父元素的总宽度，给外层盒子设置overflow: scroll/auto。具体实现不在赘述。
2. css实现方式。

<div class="box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

* {
    padding: 0;
    margin: 0;
}
html,
body {
    width: 100%;
}
.box {
    width: 100%;
    overflow: scroll;
    height: 220px;
}
/* 隐藏滚动条 */
.box::-webkit-scrollbar {
    display: none;
}
ul {
    /* flex布局使子元素横向排列 */
    display: flex;
    /* 浮动使其脱离文档流 子元素的宽度就不会受flex的影响 而且父元素的宽度会自动撑开*/
    float: left;
    height: 100%;
}
li {
    width: 200px;
    height: 200px;
    list-style: none;
    background-color: pink;
    margin: 10px 10px;
}

/*
  另一种更好的方式（来自评论区的反馈）
 */
ul {
  display: flex;
}
li {
  flex-shrink: 0;
  width: 200px;
  height: 200px;
}

3. display: -webkit-box实现

<div class="slide-box">
    <div class="slide-item"></div>
    <div class="slide-item"></div>
    <div class="slide-item"></div>
    <div class="slide-item"></div>
    <div class="slide-item"></div>
</div>

.slide-box{
    display: -webkit-box;
    overflow-x: scroll;
     -webkit-overflow-scrolling:touch;
}
.slide-item{
    width: 200px;
    height: 200px;
    border:1px solid #ccc;
    margin-right: 30px;
 }

二、 以上方式是针对每个子元素宽度确定的情况下，如果每个子元素的宽度和数量不确定，则可使用如下方式：

<div class="box">
  <ul>
    <li>双方的</li>
    <li>是否</li>
    <li>沙发上</li>
    <li>水电费是</li>
    <li>否</li>
    <li>否放松的方式</li>
    <li>否双方的</li>
  </ul>
</div>

.box {
  width: 100vw;
  height: 100px;
  background-color: pink;
  overflow: scroll; /* 关键 */
} 

ul {
  height: 100%;
  white-space: nowrap; /* 关键 */
}

li {
  display: inline-block; /* 关键 */
  min-width: 60px;
  box-sizing: content-box;
  padding: 0 20px;
  background-color: orange;
  height: 50px;
  list-style: none;
  margin: 30px 10px;
  text-align: center;
  line-height: 50px;
}

flex 实现方式：

.box {
   width: 100%;
   height: 200px;
   border: 1px solid #ccc;
   overflow: scroll;
 }

 ul {
   display: flex;
  }

  li {
    min-width: 100px;
    box-sizing: content-box;
    flex-shrink: 0; /* 关键 */
    list-style: none;
    padding: 0 50px;
  }

以上两种情况，使用flex布局，有个缺点是如果给子元素设置了margin，那么最后一个子元素的margin-right是无效的。

white-space