css怎么写 div 显示横向滚动条

Question

类似于这样的结构

<div class="container">
    <div class="box-1"></div>
    <div class="box-2"></div>
    <div class="box-3"></div>
</div>

container宽度是整个屏幕的宽度
box-1宽度是container的20%
box-2宽度是container的80%
box-3宽度是container的20%

开始的时候看不到box-3
拖动container来显示box-3

Answer 1

最终效果可以看看苹果官网用手机打开的顶部滑动菜单，以下是我写的一个演示DEMO

可以这样写：
HTML:

<div class="container-wrap">
    <div class="container">
        <div class="box-1">hello</div>
        <div class="box-2">hello2</div>
        <div class="box-3">hello3</div>
    </div>
</div>

---

CSS:

.container-wrap {
    width: 100%;
    height: 50px;
    background-color: rgba(0,0,0,0.8);
    white-space: nowrap;
    overflow: hidden;
    overflow-x: scroll; /* 1 */
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-overflow-scrolling: touch; /* 2 */
    text-align: justify; /* 3 */
    &::-webkit-scrollbar {
        display: none;
    }
}

.container {
    
}
.container > div {
    display: inline-block;
    height: 50px;
    color: #fff;
    text-align: center;
    line-height: 50px;
}
.box-1 {
     width: 80%;   
}
.box-2 {
     width: 20%;   
}
.box-3 {
     width: 20%;   
}

Answer 2

.container{
width: 120%;
overflow-x: auto;
}
.box1,.box3{
width: 20%;
}
.box2{
width: 80%;
}
这个应该可以满足你的需求,container的width必须有,不然overflow-x不会生效

Answer 3

按楼上 @infinite 的答案，横向滚动条应该是出现在浏览器最低端，而不是div 上。

目前我能想到的答案只有一种，可以把这个div 作为一个单独页面，然后使用iframe嵌套进来。

如果其他人有更加好的答案，请分享，我觉得这个问题还是挺有趣的值得关注！

Answer 4

现在的项目中有类似的需求，我是用两层div+ul来模拟的

<div width:100%>
    <div overflow-x:scroll>
        <ul width:50*3>
            <li width:50>1</li>
            <li width:50>1</li>
            <li width:50>1</li>
        </ul>
    </div>
</div>