链接水平滚动两个div [英] Linked Horizontal Scrolling With Two Divs
问题描述
我有两个表，一个是仅包含表头的表，另一个表包含所有表数据.这两个表都在各自独立的div中.我正在尝试使其在表数据div上水平滚动将触发JavaScript中的一个事件，该事件将以相同的速率滚动表头div.我知道我可以摆脱div，而只有一张带有粘性标头的表，但是我想尝试这样做.这是我认为可以使用的简化代码:
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());
});
} )();
这是小提琴
我在这里想念一些愚蠢的东西吗?在此先感谢您的帮助.我知道这类似于在这里提出的另一个问题，但是这个问题没有答案，也没有真正帮助我.
您缺少核心的滚动内容.用正确的id替换$('#')，并在最后删除().是的，添加jQuery:
$(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>
在底部div上滚动将滚动顶部的div.将jQuery添加到jsFiddle.
小提琴: https://jsfiddle.net/2xt1p8t7/
I have two tables, one is a table with just the table headers, the other table contains all the table data. Both tables are inside their own separate divs. I'm trying to make it so that scrolling horizontally on the table data div will trigger an event in JavaScript that will scroll the table header div at the same rate. I know I could get rid of the divs and just have one table with sticky headers, but I want to try to do it this way. Here's a simplified version of code that I thought would work:
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());
});
} )();
And here's the fiddle
Am I missing something stupid here? Thanks in advance for your help. I know this is similar to another question asked here, but that one doesn't have an answer and didn't really help me out.
You are missing the core scrolling stuff. Replace the $('#') with the right id and remove the () at the end. And yea, add jQuery:
$(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>
Scrolling on the bottom div will scroll the top one. Add jQuery to the jsFiddle.
Fiddle: https://jsfiddle.net/2xt1p8t7/
这篇关于链接水平滚动两个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
