html - 垂直滚动 div 内的水平滚动 div

Question

是否可以仅垂直滚动外部 div 而仅水平滚动内部 div(包含较小的 div)？我正在将 cordova 用于移动应用程序，我可以水平和垂直滚动外部 div。内部 div 不滚动。

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

#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

您可以在您的 #lineX 中使用 white-space: nowrap; 并将 overflow: hidden; 设置为 html 和 正文

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

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>

Here a jsfddle to play width