Question

所以我编写了这样的代码： http://jsfiddle.net/6ck393z8/ （它是我为网站做准备的简化版设计）

HTML：

<table class="questionsTable">
    <col width="100" />
    <tr>
        <td class="questionsList" rowspan="1">
            <div id="scroll">
                <div id="thingy"></div>
                <div id="thingy"></div>
                <div id="thingy"></div>
                <div id="thingy"></div>
                <div id="thingy"></div>
                <div id="thingy"></div>
                <div id="thingy"></div>
                <div id="thingy"></div>
            </div>
        </td>
        <td height="auto">
            <div id="image"></div>
        </td>
    </tr>
</table>

CSS：

#thingy {
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 10px;
}

#image {
    width: 100px;
    height: 800px;
    background-color: blue;
}

.questionsTable {
    width: 100%;
    height: 100%;
}

#scroll {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
}

左侧是一个带有各种按钮的菜单，可以修改右侧的内容，但问题在于：当图像很大时，并非所有按钮都可以到达，现在就是这种情况。在那些时刻，我需要向下滚动右侧滚动条，否则不能到达左侧的所有元素。我显然希望两个区域彼此独立，您只需在右侧滚动即可控制图像，而您只需在左侧滚动即可控制菜单。

我怎么能这样做？

Answer 1

尝试以下代码

<body>
    <!-- Main container to hold all sections and each section will have their own scrollbars -->
    <div>
        <!-- Left section with same height -->
        <div style="height:300px; overflow:auto;float:left; width:45%;">
            <div id="scroll">
                <div id="thingy"></div>
                <div id="thingy"></div>
                <div id="thingy"></div>
                <div id="thingy"></div>
                <div id="thingy"></div>
                <div id="thingy"></div>
                <div id="thingy"></div>
                <div id="thingy"></div>
            </div>
        </div>
        <!-- Right section with same height -->
        <div style="height:300px; overflow:auto;float:right; width:45%">
            <div id="image"></div>
        </div>
    </div>
</body>

HTML / CSS如何获得2个完全独立的滚动条？

1 个答案: