子元素宽度不确定的情况下实现横向滚动
开发中经常会遇到横向滚动的需求，有时是已经确定了子元素个数（父元素的宽度自然也就确定），给父元素的父盒子设置overflow: scroll/auto即可。
一、子元素的数量不确定导致宽度不确定。
- js实现，首先获取子元素的个数，计算父元素的总宽度，给外层盒子设置overflow: scroll/auto。具体实现不在赘述。
- 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;
}
- 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
