Spiegel Scroll-Effekt On.Click zwischen zwei Containern

Im Moment lerne ich, wie man in Javascript und jquery schreibt.Ich benutze einen Code, der, wenn Sie auf das Navigationsmenü klicken scrollt hinunter zu einem bestimmten div in einem anderen div. Ich versuche jedoch, diesen Container in zwei getrennte zu teilen. So beginnt die Left_Container von unten und die Right_Container beginnt von oben. Die Idee besteht darin, einen Spiegel zu erstellen, der zwischen den beiden Containern scrollt. Während der erste nach unten geht, geht der andere nach oben. Ich nehme an, dass der Fehler irgendwo in der data-target ist, aber mein Wissen ist nicht genug, um es selbst zu beheben. Wenn jemand mir helfen kann, werde ich wirklich dankbar sein.Spiegel Scroll-Effekt On.Click zwischen zwei Containern

$(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: Vielen Dank im Voraus.

Mit freundlichen Grüßen,

George S.

Quelle

2016-04-23 George Stoqnov

Hier ist ein einfaches Beispiel von zwei divs zu verstehen, die sich in umgekehrter Richtung bewegen ...

<!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>

Quelle

2016-04-23 22:15:20 user6245342

Ich habe versucht, meinen Code mit dem Beispiel Modifizieren Du hast es mir gegeben, aber da ist etwas Seltsames. Wenn ich an einem Punkt das erste div scrolle, bleibt das zweite div stecken und will nicht mehr blättern. [JsFiddle des Problems] (https://jsfiddle.net/nowzbwm8/1/) –

Funktioniert ok für mich in meinem Chromium-Browser. Das einzige kleine Problem ist, dass das zweite div nicht unten beginnt, wo es sein sollte, um dieses Problem zu beheben. Wir müssen es von Anfang an auf den Grund stellen ... Sie können das BODY-Tag durch ersetzen dies ... – user6245342

Spiegel Scroll-Effekt On.Click zwischen zwei Containern

Antwort

Verwandte Themen