编辑3:我认为这是我去过的最接近的。由于这是反应,所以我在构造函数中添加了一个事件侦听器:
componentDidMount() {
const self = this;
Array.from(document.getElementsByClassName('scroll-content')).forEach((element) => {
element.addEventListener('scroll',
() => self.scrollDivsTogether(element.parentElement.parentElement.id));
});
}
然后我的功能就是这样的:
scrollDivsTogether(id) {
const opt = $('#options-column>table>tbody.scroll-content');
const cont = $('#options-contents>table>tbody.scroll-content');
if (cont.scrollTop() !== opt.scrollTop()) {
if (id === 'options-column') {
cont.scrollTop(opt.scrollTop());
} else {
opt.scrollTop(cont.scrollTop());
}
}
}
它仍然会在两个事件上触发,但要少一些。我不知道该如何摆弄……也许我需要在某处添加延迟?
另外,我的HTML看起来像这样:
<div id='table-container'>
<div id='options-column'>
<table>
<thead class='fixed-header'>
<tr>
<th>Heading</th>
</tr>
</thead>
<tbody class='scroll-content'>
<tr>
<td>h1</td>
</tr>
<!-- more tr's here -->
</tbody>
</table>
</div>
<div id='options-contents'>
<table>
<thead class='fixed-header'>
<tr>
<th>A1</th>
<th>A2</th>
<th>A3</th>
</tr>
</thead>
<tbody class='scroll-content'>
<tr>
<td>a1</td>
<td>a2</td>
<td>a3</td>
</tr>
<!-- more tr's here -->
</tbody>
</table>
</div>
</div>
编辑2:
我确实做了一个fiddle,但是它不能与“ onscroll”事件一起使用,并且我不确定如何在React中进行纯JS调用。无论如何,一个有效的jquery是here,但是我想知道是否这是滞后的,因为我正在使用
onscroll
?编辑1:我认为该功能与@Lokman Hakim建议的功能一致,但对我而言却非常不稳定。
scrollDivsTogether() {
$('.scroll-content').on('scroll', (e) => {
const ele = $(e.currentTarget);
const top = ele.scrollTop();
if (ele.parent().parent().attr('id') === 'options-contents') {
// already scrolled contents, scroll only the column
$('#options-column>table>tbody.scroll-content').scrollTop(top);
// already scrolled column, scroll only the contents
} else {
$('#options-contents>table>tbody.scroll-content').scrollTop(top);
}
});
}
原版的:
我目前有这段代码,效果很好:
HTML(实际上是jsx文件):
<div id='table-container' onScroll={this.scrollDivsTogether}>
<div id='options-column'>
<table>
<BuildHeader ... /> <!-- consists of a thead of class fixed-header-->
<BuildRows ... /><!-- consists of a thead of class scroll-content -->
</table>
</div>
<div id='options-contents'>
<table>
<BuildHeader ... /> <!-- consists of a thead of class fixed-header-->
<BuildRows ... /><!-- consists of a tbody of class scroll-content -->
</table>
</div>
</div>
CSS:
#table-container {
overflow: hidden;
&:hover {
overflow-x: overlay;
}
}
.fixed-header tr {
position: relative;
display: block;
}
.scroll-content {
display: block;
overflow: overlay;
width: 100%;
}
#options-column {
border: solid 1px $lightBlue;
position: fixed;
max-width: 240px;
min-width: 240px;
width: 240px;
overflow: hidden;
z-index: 1;
}
#options-contents {
overflow: visible;
margin-left: 240px;
z-index: -1;
}
Javascript:
scrollDivsTogether() {
const opt = $('#options-column>table>tbody.scroll-content');
const cont = $('#options-contents>table>tbody.scroll-content');
opt.on('scroll', function () {
cont.scrollTop($(this).scrollTop());
});
cont.on('scroll', function () {
opt.scrollTop($(this).scrollTop());
});
现在,该代码在我们看来可以正常工作,但有时会很费时,有时会像这样卡住(这些行应该对齐):
当我应该能够阻止另一个或其他内容时,在一个回调中触发滚动顶部在另一个回调中触发滚动顶部也让我感到困扰。我已经尽力想了一切...帮助吗?
如果要“运行中”查看它,则为my site(从列表中选择一个表)。
最佳答案
尝试一下呢?虽然可能不是最佳的。
这是代码https://www.jsnippet.net/snippet/1381/2/Scrolling-two-divs-at-the-same-time的代码段
https://jsfiddle.net/1tv8bkyc/8/
var optTimeout, contTimeout;
opt.on('scroll', function () {
if(contTimeout) return;
if(optTimeout) clearTimeout(optTimeout);
optTimeout = setTimeout(function () {
if(optTimeout) {
clearTimeout(optTimeout);
optTimeout = null;
}
}, 50);
cont.scrollTop($(this).scrollTop());
});
cont.on('scroll', function () {
if(optTimeout) return;
if(contTimeout) clearTimeout(contTimeout);
contTimeout = setTimeout(function() {
if(contTimeout) {
clearTimeout(contTimeout);
contTimeout = null;
}
}, 50);
opt.scrollTop($(this).scrollTop());
});
setTimeout使得在滚动一个元素时,另一个元素不会触发滚动事件。对于上述问题,请确保仅运行一次“ this.scrollDivsTogether”方法,如果您正在使用react,则可能在componentDidMount内部运行