Question

我们正在创建一个能够垂直水平滚动的Web应用程序。我们使用以下HTML格式执行此操作：

<div class='main-scroll'>
    <div class='main-content'>
        <div id='sub1' class='sub-scroll'>
            <div class='content'>
            </div>
        </div>
        <div id='sub2' class='sub-scroll'>
            <div class='content'>
            </div>
        </div>
    </div>
</div>

以下CSS：

body {
    -webkit-overflow-scrolling: touch;
}

.main-scroll {
    height: 300px;
    width: 600px;
    background-color: #ff0000;
    overflow-x: auto;
}

.main-content {
    height: 100%;
    width: 1000px;
    background-color: #ff0000;
}

.sub-scroll {
    height: 100%;
    width: 450px;
    background-color: #00ff00;
    position: relative;
    float: left;
    overflow-y: auto;
}

#sub1 {
    top: 0px;
    left: 0px;
}

#sub2 {
    top: 0px;
    left: 50px;
}

.content {
    width: 100%;
    height: 600px;
    position: relative;
    background: #1e5799; /* Old browsers */
    background: -moz-linear-gradient(top,  #1e5799 0%, #e079de 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#e079de)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #1e5799 0%,#e079de 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #1e5799 0%,#e079de 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #1e5799 0%,#e079de 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #1e5799 0%,#e079de 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#e079de',GradientType=0 ); /* IE6-9 */

}

解决方案也可以在这个JSFiddle http://jsfiddle.net/vevfknct/3/

中找到

它适用于台式机，iOS，Firefox for Firefox等。问题是，用于Android的chrome可以在可以垂直滚动的div上水平滚动。它只能滚动可滚动div之间的空间。有没有人有铬的解决方案？

在具有overflow-x的div中具有overflow-y的多个div

0 个答案: