0

質問のレプリカを開発しました：

http://jsfiddle.net/m8pDd/

フィドルを参照すると、親 div 内に 2 つの 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 に答える