javascript - 如何在javascript中双重滚动

标签 javascript html angular

我有两张 table 。它们都是可滚动的。我如何复制滚动,例如表 1 正在滚动,表 2 也可能滚动或反向。
在下图中,您可以看到概念。不幸的是,我还没有任何代码。

enter image description here

最佳答案

想象两个像

<div class="area dos">
  <div class="move" [style.top]="top">
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </div>
  </div>
<div class="area uno" #one (scroll)="scroll(one)">
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

功能滚动就像
scroll(one:any)
  {
    this.top=-one.scrollTop+'px'
  }

“关键”是“区域dos”有相对位置,“移动”位置是绝对的,所以我们可以改变“移动”div的[style.top]

您可以在 stackblitz 中查看

关于javascript - 如何在javascript中双重滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59942978/

相关文章:

javascript - 试图从字符串中删除 'px' 吗?

javascript - CSP 通过传递 PHP 变量转换内联 onclick 事件

html - 标题下方的导航随机颠簸

html - 应用程序设计 : Scala + HTML5

javascript - 将事件监听器添加到 Angular 4 中的动态元素?

php - 在通过 AJAX 响应发送的页面上执行 javascript 函数

javascript - 为什么 string.replace(/\n/g, '<br>' ) 不能与 underscore.js 一起使用?

Angular :如何使链接跳转到同一页面中的某些部分

angular - 如何在 sonarcloud 中获得 Angular 的准确代码覆盖率

javascript - 可编辑表格单元格的 Jeditable 替代方案