Синхронизация двух ползунков - проверка, если миниатюра видна

Question

Фон:

У меня есть два ползунка, которые связаны между собой.
Один показывает миниатюры и прокручивает вверх и вниз (в цикле), используя обертку и поле сверху,Он отображает 4 эскиза одновременно.Другие прокручивают влево и вправо и отображают один элемент, используя display:none; и display: block;.

. Ползунки синхронизируются, что я имею в виду, если щелкнуть на миниатюре соответствующее изображение на втором слайдере, иесли вы нажмете кнопку «Далее» или «Предыдущая» на большом слайдере, соответствующая миниатюра будет выделена.Это работает.

Проблема:
Я изо всех сил пытаюсь добавить способ прокрутки ползунка миниатюр к активному элементу, если его еще нет в окне просмотра.

Нажатие следующего на большом ползунке должно прокручивать ползунок миниатюр только в том случае, если правильный эскиз уже не находится в видимой области.
Теперь, как я мог бы поступить, это следующее:

Получить текущую верхнюю границу ползунка миниатюр.
Получить индекс активного элемента.
Получить предполагаемый marginTop индексного элемента, а также предыдущий и следующий 3.

Если marginTop >= (curindex - 3 * thumbnailHeight)
и marginTop <= 0 - (curindex * thumbnailHeight)
Элемент должен быть виден, но внизу
Или marginTop <= (curindex + 3) * thumbnailHeight
и marginTop >= 0 + (curindex * thumbnailHeight)
Элемент должен быть виден сверху.

Комбинированный (полный код см. Ниже):

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';
}

Ошибка:
Должен быть какой-то логический недостаток, который я не могу обернуть вокруг себя.Код отлично работает для первых 4 элементов, но после этого он продолжает прокручиваться, или, если маленький ползунок уже был прокручен, он также продолжает прокручивать вниз.В конце это даже переполняется.Функция prev имеет схожие проблемы, но здесь она также пропускает прокрутку до первого элемента.

Полный код:
https://jsfiddle.net/Sirence/nuzsryxd/1/

var thumbnailHeight = 92;
var boxCount = 8;
var maxTop = (boxCount - 3) * thumbnailHeight;
var scrollWrapper = document.getElementById('thumbnail-slider');
var thumbnails = document.getElementsByClassName('thumbnail');
var images =  document.getElementsByClassName('image');
var curindex = 0;

window.thumbnail = function(index) {
  for (i = 0; i < thumbnails.length; ++i) {
    thumbnails[i].classList.remove('active');
	}
	thumbnails[index].classList.add('active');

 	for (j = 0; j < images.length; ++j) {
    images[j].style.display = 'none';
	}
  images[index].style.display = 'inline-block';
  curindex = index;
};

window.down = function() {
 marginTop = parseInt(scrollWrapper.style.marginTop, 10);
 if(marginTop) {
    if(marginTop == (0 - maxTop)) scrollWrapper.style.marginTop = '0px';
    else scrollWrapper.style.marginTop = (marginTop - thumbnailHeight) + 'px';
  }
	else scrollWrapper.style.marginTop = 0 - thumbnailHeight + 'px';
};

window.up = function() {
 marginTop = parseInt(scrollWrapper.style.marginTop, 10);
 if(marginTop) {
		if(marginTop == 0) scrollWrapper.style.marginTop = 0 - maxTop + 'px';
    else scrollWrapper.style.marginTop = (marginTop + thumbnailHeight) + 'px';
	}
  else scrollWrapper.style.marginTop = 0 - maxTop + 'px';
};

window.next = function() {
  images[curindex].classList.remove('current');
  images[curindex].style.display = 'none';
  if (curindex < boxCount) {
  	curindex++;
  } else {
  	curindex = 0;
  }
  
  images[curindex].classList.add('current');
  images[curindex].style.display = 'block';
  
   for (i = 0; i < thumbnails.length; ++i) {
    	thumbnails[i].classList.remove('active');
		}
		thumbnails[curindex].classList.add('active');
    
    // my problem
    
    var marginTop = parseInt(scrollWrapper.style.marginTop, 10);
    if (!marginTop) marginTop = 0;
    
    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';
    }
};
            
window.prev = function() {
	images[curindex].classList.remove('current');
  images[curindex].style.display = 'none';
  if (curindex > 0) {
  	curindex--;
  } else {
  	curindex = boxCount;
  }
  
  images[curindex].classList.add('current');
  images[curindex].style.display = 'block';
  
   for (i = 0; i < thumbnails.length; ++i) {
    	thumbnails[i].classList.remove('active');
		}
		thumbnails[curindex].classList.add('active');
    
    // my problem (same issue as above just the other way around)
    
    var marginTop = parseInt(scrollWrapper.style.marginTop, 10);
    if (!marginTop) marginTop = 0;
    
    if(((marginTop >= (curindex - 3) * thumbnailHeight) && (marginTop <= 0 - (curindex * thumbnailHeight))) || ((marginTop <= (curindex + 3) * thumbnailHeight) && (marginTop >= 0 + (curindex * thumbnailHeight)))) {
      console.log('no scroll');
    } else {
    	if (curindex >= boxCount - 3) {
      	scrollWrapper.style.marginTop = 0 - maxTop + 'px';
      } else {
      	scrollWrapper.style.marginTop = 0 - (curindex * thumbnailHeight) + 'px';
      }
    }
};

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  text-align: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none; 
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#thumbnail-sidebar {
  height: 358px;
  overflow: hidden;
  margin-top: 20px;
  margin-bottom: 20px;
  border: 1px solid black;
  width: 100px;
  padding: 10px;
}

.thumbnail {
  width: 98px;
  height: 80px;
  border: 1px solid black;
  margin-bottom: 10px;
  text-align: center;
  line-height: 80px;
  cursor: pointer;
}

.thumbnail.active {
  border: 1px solid red;
}

.slider-control {
  width: 122px;
  border: 1px solid black;
  cursor: pointer;
}

#thumbnail-slider {
  transition: all 0.5s linear;
}

.main-control {
  border: 1px solid black;
  cursor: pointer;
  display: inline-block;
  width: 50px;
}

#main {
  border: 1px solid black;
  display: inline-block;
  width: 200px;
  height: 200px;
  margin-top: 40px;
  overflow: hidden;
}

.image {
  width: 200px;
  height: 200px;
  display: none;
  font-size: 14px;
  box-sizing: border-box;
  line-height: 200px;
}

.current {
  display: block;
}

<div id="up" class="slider-control" onclick="up()">Up</div>
<div id="thumbnail-sidebar">
  <div id="thumbnail-slider">
    <div class="thumbnail active" onclick="thumbnail(0)">0</div>
    <div class="thumbnail" onclick="thumbnail(1)">1</div>
    <div class="thumbnail" onclick="thumbnail(2)">2</div>
    <div class="thumbnail" onclick="thumbnail(3)">3</div>
    <div class="thumbnail" onclick="thumbnail(4)">4</div>
    <div class="thumbnail" onclick="thumbnail(5)">5</div>
    <div class="thumbnail" onclick="thumbnail(6)">6</div>
    <div class="thumbnail" onclick="thumbnail(7)">7</div>
    <div class="thumbnail" onclick="thumbnail(8)">8</div>
  </div>
</div>
<div id="down" class="slider-control" onclick="down()">Down</div>

<div id="prev" class="main-control" onclick="prev()">Prev</div>
<div id="main">
  <div id="main-slider">
    <div class="image current">0</div>
    <div class="image">1</div>
    <div class="image">2</div>
    <div class="image">3</div>
    <div class="image">4</div>
    <div class="image">5</div>
    <div class="image">6</div>
    <div class="image">7</div>
    <div class="image">8</div>
  </div>
</div>
<div id="next" class="main-control" onclick="next()">Next</div>