Эффект прокрутки зеркала On.Click между двумя контейнерами

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="Wrapper"> 
 
    <div class="Menu"> 
 
     <li data-target="#Left_A,Right_C">A</li> 
 
     <li data-target="#Left_B,Right_B">B</li> 
 
     <li data-target="#Left_C,Right_A">C</li> 
 
    </div> 
 
    <div class="Left_Container"> 
 
     <div class="Box" id="Left_C"> 
 
      Box C 
 
     </div> 
 
     <div class="Box" id="Left_B"> 
 
      Box B 
 
     </div> 
 
     <div class="Box" id="Left_A"> 
 
      Box A 
 
     </div> 
 
    </div> 
 
    <div class="Left_Container"> 
 
     <div class="Box" id="Right_A"> 
 
      Box A 
 
     </div> 
 
     <div class="Box" id="Right_B"> 
 
      Box B 
 
     </div> 
 
     <div class="Box" id="Right_C"> 
 
      Box C 
 
     </div> 
 
    </div> 
 
</div>

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

С наилучшими пожеланиями,

George S.

источник

2016-04-23 George Stoqnov

Вот легко понять пример двух див, которые прокручивают друг с другом в обратном направлении ...

<!DOCTYPE html> 
<head> 

<style type="text/css"> 

.BoxStyle { 
position: absolute; 
left: 10px; 
width: 100px; 
height: 100px; 
overflow: auto; 
border: 1px solid black; 
} 

</style> 
</head> 

<body> 


<div class="BoxStyle" id="Box1" onscroll="Box2.scrollTop=(Box2.scrollHeight-this.scrollTop);">box 1 
<div style="position:absolute; top:500px;">.</div> 
</div> 

<br><br><br><br><br><br><br><br> 

<div class="BoxStyle" id="Box2" onscroll="Box1.scrollTop=(Box1.scrollHeight-this.scrollTop);">box 2 
<div style="position:absolute; top:500px;">.</div> 
</div> 

</body> 
</html>

источник

2016-04-23 22:15:20 user6245342

Я попытался модифицировать свой код с примером вы дали мне, но есть что-то странное. Когда я прокручиваю первый div, в какой-то момент второй div застревает и больше не хочет прокручивать. [JsFiddle проблемы] (https://jsfiddle.net/nowzbwm8/1/) –

Работает нормально для меня в моем браузере Chromium. Единственная второстепенная проблема заключается в том, что второй div не начинается в нижней части, где это должно быть так, чтобы исправить эту проблему, мы должны установить его на дно с начала ... Вы можете заменить тег BODY на это ... – user6245342

Эффект прокрутки зеркала On.Click между двумя контейнерами

ответ

Смежные вопросы