0

开发了问题的副本：

http://jsfiddle.net/m8pDd/

如果您参考小提琴，它在父 div 中有两个 div，当父 div 溢出以显示垂直滚动条时，右侧内部 div 的水平滚动条进入垂直溢出的内部，并且水平滚动条无法供人使用。

怎么实现即使数据比较多也能访问到的内层div的水平滚动条；在我看来，我喜欢在父 div 之外浮动或创建滚动条的副本？？

有任何想法吗？？

代码：

<div class="parent">
    <div id="left-order-panel">
        <table id="edit-left">
            <thead>
                <tr>
                <th>h1</th>
                <th>h2</th>
                <th>h3</th>
                <th>h4</th>
                <th>h5</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                <td>h1</td>
                <td>h2</td>
                <td>h3</td>
                <td>h4</td>
                <td>h5</td>
                </tr>
            </tbody>
        </table>

        <table id="data-left">
            <thead>
                <tr>
                <th>h1</th>
                <th>h2</th>
                <th>h3</th>
                <th>h4</th>
                <th>h5</th>
                </tr>
            </thead>
            <tbody>
                <tr>v1</tr>
                <tr>v2</tr>
                <tr>V3</tr>
                <tr>v4</tr>
                <tr>V5</tr>
            </tbody>
        </table>
    </div>
    <div id="right-order-panel">
        <div id="right-order-inner">
         <table id="order-right">
             <thead>
                <tr style="height: 26px;">
                    <th data-lang="dashboard.order-projection" colspan="10">Order Projection</th>
                </tr>
                 <tr style="height: 26px;">
                     <th colspan="4"> 2013 </th>
                     <th colspan="4"> 2014 </th>
                 </tr>

            </thead>
            <tbody>
                <tr style="height: 26px;">
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                       <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>4</td>
                    <td>4</td>
                </tr>
                 <tr style="height: 26px;">
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                        <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                     <td>4</td>
                     <td>4</td>
                </tr>
                 <tr style="height: 26px;">
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                     <td>4</td>
                     <td>4</td>
                </tr>
                <tr style="height: 26px;">
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>4</td>
                    <td>4</td>
                </tr>

            </tbody>
         </table>

        </div>
    </div>
4

2 回答 2

2

你可以用一些 JQuery 来做到这一点。

只需包含库：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

见 JSfiddle：http: //jsfiddle.net/V4T4V/

使用滚动功能，您可以检测何时滚动 wrapper1，然后移动 wrapper2。

$(function(){
    $(".wrapper1").scroll(function(){
        $(".wrapper2")
            .scrollLeft($(".wrapper1").scrollLeft());
    });
    $(".wrapper2").scroll(function(){
        $(".wrapper1")
            .scrollLeft($(".wrapper2").scrollLeft());
    });
});

然后，您可以将此栏放在 div 之外、顶部等处。

只需将其放置在您想要滚动条的位置（注意包装器的 css 必须具有相同的宽度）：

<div class="wrapper1">
    <div class="div1">
    </div>
</div>

然后，您可以继续使用一些 css 定位将滚动条浮动在您的父 div 中。

于 2013-08-28T11:15:26.750 回答
0

像这样的东西会起作用：

HTML

<div class="outer">
    <div class="inner">
    <p>some text..</p>
    </div>
</div>

CSS

.outer {
    height: 100px; width: 100px;
    overflow: auto;
}
.inner {
    width: 200px; height: 100px;
}
p {
    border: 1px solid black;
    width: 200px;
    padding: 5px;
}

本质上，我添加了一个inner带有指定heightand的容器width。现在overflow发生在outer容器上，您可以相应地间隔条形。

示例小提琴

于 2013-08-28T11:30:16.117 回答