水平滚动div在垂直滚动div内

Question

是否可以只垂直滚动外部div而内部div(包含较小的div)只能水平滚动？我正在使用cordova作为移动应用程序,我可以水平和垂直滚动外部div.内部div不滚动.

这是外部div(#container)的CSS,内部div(#line1等)和内部的其他div.

#container {
   height: 100%;
   overflow-y: auto;
}

#line1, #line2, #line3 {
    display: table;
    width: 50em;
    overflow-x: auto;
}

.smallDivs {
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    margin-right: -6%;
}

HTML结构如下所示:

<div id="container">
    <div id="line1">
        <div class="smallerDivs"><div>
        <div class="smallerDivs"><div>
    </div>
    <div id="line2">
        <div class="smallerDivs"><div>
        <div class="smallerDivs"><div>
    </div>
    <div id="line3">
        <div class="smallerDivs"><div>
        <div class="smallerDivs"><div>
    </div>
</div>

Answer 1

你可以white-space: nowrap;在你的用途中使用#lineX并设置overflow: hidden;为html和body

尝试使用此基本示例来指导您:

html,body{
    height: 100%;
    overflow: hidden;
}

#container {
   height: 100%;
   overflow-y: auto;
   background: red;
}

#line1, #line2, #line3 {
    overflow-x: auto;
    white-space: nowrap;
    padding: 20px;
    background: yellow;
    margin: 30px;
}

.smallerDivs {
    height: 112px;
    width: 112px;
    margin: 10px;
    display: inline-block;
    vertical-align: middle;
    background: #fff;
}

<div id="container">
    <div id="line1">
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
    </div>
    <div id="line2">
         <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
    </div>
    <div id="line3">
         <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
    </div>
</div>

这里有一个jsfddle来播放宽度