2つのDivsとの水平スクロール

Question

私は2つのテーブルを持っています.1つはテーブルヘッダーだけのテーブルで、もう1つのテーブルはすべてのテーブルデータを含んでいます。どちらのテーブルもそれぞれ別々のdivにあります。私は、テーブルのデータdivを水平にスクロールすると、同じ速度でテーブルのヘッダーdivをスクロールするJavaScriptのイベントをトリガーするようにしようとしています。私はdivsを取り除くことができ、ちょうど粘着性のあるヘッダーを持つ1つのテーブルを持つことができますが、私はこのようにしてみたいと思っています。ここで私は仕事だろうと思ったのコードの簡易版です：

HTML：

<div id = "div1"> 
    <table id = "stickyheaders" class = "table table-condensed table-striped small"> 
    <thead><tr> 
     <th>header1</th> 
     <th>header2</th> 
     <th>header3</th> 
     <th>header4</th> 
     <th>header5</th> 
     <th>header6</th> 
     <th>header7</th> 
     <th>header8</th> 
     <th>header9</th> 
     <th>header10</th> 
    </tr></thead> 
    </table> 
</div> 

<div id = "div2"> 
    <table id = "tablebody" class = "table table-condensed table-striped small"> 
    <tbody> 
     <tr> 
     <td>data1</td> 
     <td>data2</td> 
     <td>data3</td> 
     <td>data4</td> 
     <td>data5</td> 
     <td>data6</td> 
     <td>data7</td> 
     <td>data8</td> 
     <td>data9</td> 
     <td>data10</td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

はJavaScript：

$(document).ready(function() { 
    $('#div2').on('scroll', function() { 
     $('#').scrollLeft($(this).scrollLeft()); 
    }); 
})(); 

そしてここfiddle

が、私は何かが欠けアムいますここで愚か？あなたの助けを前にありがとう。私はこれがここで尋ねられる別の質問に似ていることを知っていますが、それは答えがなく、本当に私を助けてくれませんでした。

Answer 1

あなたはコアスクロールのものがありません。 $('#')を右のidに置き換え、最後に()を削除します。そして、いや、jQueryの追加：底のdivに

$(document).ready(function() { 
 
    $('#div2').on('scroll', function() { 
 
    $('#div1').scrollLeft($(this).scrollLeft()); 
 
    }); 
 
});

#div1 { 
 
    width: 50%; 
 
    height: 40px; 
 
    padding: 10px; 
 
    border: 1px solid #c0c0c0; 
 
    border-radius: 5px; 
 
    overflow-y: auto; 
 
    overflow-x: auto; 
 
    label { 
 
    display: block; 
 
    } 
 
    tr:after { 
 
    content: ' '; 
 
    display: block; 
 
    visibility: auto; 
 
    clear: both; 
 
    } 
 
} 
 
#div2 { 
 
    width: 50%; 
 
    height: 50px; 
 
    padding: 10px; 
 
    border: 1px solid #c0c0c0; 
 
    border-radius: 5px; 
 
    overflow-y: auto; 
 
    overflow-x: auto; 
 
    label { 
 
    display: block; 
 
    } 
 
    tr:after { 
 
    content: ' '; 
 
    display: block; 
 
    visibility: auto; 
 
    clear: both; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div1"> 
 
    <table id="stickyheaders" class="table table-condensed table-striped small"> 
 
    <thead> 
 
     <tr> 
 
     <th>header1</th> 
 
     <th>header2</th> 
 
     <th>header3</th> 
 
     <th>header4</th> 
 
     <th>header5</th> 
 
     <th>header6</th> 
 
     <th>header7</th> 
 
     <th>header8</th> 
 
     <th>header9</th> 
 
     <th>header10</th> 
 
     </tr> 
 
    </thead> 
 
    </table> 
 
</div> 
 

 
<div id="div2"> 
 
    <table id="tablebody" class="table table-condensed table-striped small"> 
 
    <tbody> 
 
     <tr> 
 
     <td>data1</td> 
 
     <td>data2</td> 
 
     <td>data3</td> 
 
     <td>data4</td> 
 
     <td>data5</td> 
 
     <td>data6</td> 
 
     <td>data7</td> 
 
     <td>data8</td> 
 
     <td>data9</td> 
 
     <td>data10</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

スクロールを一番上にスクロールします。 jsFiddleにjQueryを追加します。

フィドル：https://jsfiddle.net/2xt1p8t7/