Эффект зеркальной прокрутки включен. Щелкните между двумя контейнерами. ⇐ Jquery

[Anonymous]

В настоящий момент я учусь писать на javascript и jquery. Я использую код, который при нажатии на меню навигации прокручивает вниз до определенного div внутри другого div. Однако я пытаюсь разделить этот контейнер на два отдельных. Таким образом, Left_Container будет начинаться снизу, а Right_Container — сверху. Идея состоит в том, чтобы создать зеркальную прокрутку между двумя контейнерами. Пока первый идет вниз, другой идет вверх. Я предполагаю, что ошибка где-то в data-target, но моих знаний недостаточно, чтобы исправить ее самостоятельно. Если кто-то сможет мне помочь, я буду очень благодарен.

Код: Выделить всё

$(document).ready(function() {
$(".Menu li").on('click', function() {
$('.Left_Container').animate({
scrollTop: $($(this).data('target')).position().top +                                       $('.Left_Container').scrollTop()
}, 'slow');
$('.Right_Container').animate({
scrollTop: $($(this).data('target')).position().top +                                       $('.Right_Container').scrollTop()
}, 'slow');
});
});

Код: Выделить всё

.Wrapper {
display: flex;
position: relative;
width: 90vw;
height: 90vh;
background-color: purple;
}
.Menu {
position: relative;
width: 10vw;
height: 90vh;
background-color: blue;
}
.Menu li {
position: relative;
font-size: 4vw;
line-height: 5vw;
text-align: center;
color: white;
cursor: pointer;
list-style-type: none;
}
.Left_Container {
position: relative;
width: 43vw;
height: 90vh;
background-color: red;
overflow-y: hidden;
}
.Right_Container {
position: relative;
width: 43vw;
height: 90vh;
background-color: red;
overflow-y: hidden;
}
.Box {
position: relative;
width: 40vw;
height: 90vh;
background-color: purple;
cursor: pointer;
}

Код: Выделить всё

[*]A
[*]B
[*]C


Box C

Box B

Box A




Box A

Box B

Box C

PS: Заранее спасибо.

С уважением,

Джордж С.

Подробнее здесь: https://stackoverflow.com/questions/368 ... containers