同时滚动两个div jQuery中

Question

编辑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()); 
    }); 

，该代码工作的相当我们，但它有时laggy，而且有时卡住像这样（的线都应该对齐）：

这也是相当困扰我在一个回调中触发scrolltop在另一个回调触发scrolltop，当我应该能够阻止其他或什么。我已经尝试了所有我能想到的...帮助？

这是my site如果你想看到它“在行动”（从列表中选择一个表）。

Answer 1

关于尝试这个怎么样？虽然可能不是最优的。 下面是代码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”方法一次，也许在componentDidMount里面，如果你使用的是反应

Answer 2

尝试看看，这个链接

https://www.jsnippet.net/snippet/332/Scrolling-two-divs-at-the-same-time