Javascript 同步两个滑块-测试缩略图是否可见

背景：

我有两个已连接的滑块。
其中一个显示缩略图，并使用包装器和边距顶部上下滚动（循环）。它一次显示4个缩略图。 另一个向左和向右滚动，并使用

display:none显示一个项目和
显示：块

滑块是同步的，我的意思是，如果单击缩略图，第二个滑块中相应的图像将显示，如果单击大滑块中的“下一步”或“上一步”，相应的缩略图将高亮显示。这是有效的

问题：

我正在尝试添加一种方法，如果缩略图滑块不在视口中，则可以将其滚动到活动项

如果正确的缩略图不在可见区域中，单击大滑块上的“下一步”应仅滚动缩略图滑块。

现在，我认为我可以这样做：

获取缩略图滑块顶部的当前边距。

获取活动项的索引。

获取索引项的假定marginTop，以及上一个和下一个3

如果
marginTop>=（curindex-3*拇指指甲高度）


和
marginTop
if(((marginTop >= (curindex - 3) * thumbnailHeight) && (marginTop <= 0 - (curindex * thumbnailHeight))) || ((marginTop <= (curindex + 3) * thumbnailHeight) && (marginTop >= 0 + (curindex * thumbnailHeight)))) {
  console.log('no scroll');
} else {
    scrollWrapper.style.marginTop = 0 - (curindex * thumbnailHeight) + 'px';
}