鏡像滾動效果On.Click兩個容器

目前，我正在學習如何在javascript和jquery中編寫代碼。我使用的代碼是當您單擊導航菜單時，它滾動到另一個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：謝謝你在前進。

最好的問候，

喬治·S·

來源

2016-04-23 George Stoqnov

下面是一個容易理解的例子兩個div是滾動彼此相反的...

<!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兩個容器

回答

相關問題