如何通過ID同步兩個div的滾動

Question

我有兩個div，每個垂直佔據屏幕的一半。其中一個有一個滾動條。
在每個div上都有航點或id。
當滾動時，我想讓滾動對齊兩個div，以便相同的id始終彼此相反。

一個例子是這樣的 http://jasmine.github.io/edge/introduction.html

Answer 1

我認爲我明白你想要什麼，請嘗試這個 ，你可以提高代碼

$('#dv2').on("scroll", function() { 
 
     var lastDivInView = -1 
 
     var stop=false 
 
     var allCommts=$("#dv2").find("div") 
 
     var cnt=allCommts.length 
 
     var i=0; 
 
     while (!stop && i < cnt) { 
 
      if ($(allCommts[i]).offset().top > 0 && $(allCommts[i]).offset().top < $(this).height()) { 
 
       lastDivInView = i; 
 
       stop = true 
 
      } 
 
      i++ 
 
     } 
 
     if (lastDivInView>-1) 
 
      $("#dv1").find("a")[lastDivInView].scrollIntoView() 
 
    }); 
 
    function ScrollToView(index) { 
 
     var dvCommt = $("#dv2").find("div")[index - 1] 
 
     dvCommt.scrollIntoView() 
 
     
 
     
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div style="width: 400px"> 
 
    <div id="dv1" style="float: left; max-height: 40px; width: 45%; border: 1px solid red; overflow: auto"> 
 
      <a href="#" onclick="ScrollToView(1)">Code 1</a><br /> 
 
      <a href="#" onclick="ScrollToView(2)">Code 2</a><br /> 
 
      <a href="#" onclick="ScrollToView(3)">Code 3</a><br /> 
 
      <a href="#" onclick="ScrollToView(4)">Code 4</a><br /> 
 
      <a href="#" onclick="ScrollToView(5)">Code 5</a><br /> 
 
      <a href="#" onclick="ScrollToView(6)">Code 6</a><br /> 
 
      <a href="#" onclick="ScrollToView(7)">Code 7</a><br /> 
 
      <a href="#" onclick="ScrollToView(8)">Code 8</a><br /> 
 
      <a href="#" onclick="ScrollToView(9)">Code 9</a><br /> 
 
      <a href="#" onclick="ScrollToView(10)">Code 10</a><br /> 
 
     </div> 
 
    <div id="dv2" style="float: left; max-height: 150px; width: 45%; border: 1px solid green; overflow: auto"> 
 
     <div style="border:1px solid black;margin:10px"> 
 
      Comments for code 1:aaa bbbbb cccc dddd eee ffff 
 
     </div> 
 
     <div style="border:1px solid black;margin:10px"> 
 
      Comments for code 2:aaa bbbbb cccc dddd eee ffff 
 
     </div> 
 
     <div style="border:1px solid black;margin:10px"> 
 
      Comments for code 3:aaa bbbbb cccc dddd eee ffff 
 
     </div> 
 
     <div style="border:1px solid black;margin:10px"> 
 
      Comments for code 4:aaa bbbbb cccc dddd eee ffff 
 
     </div> 
 
     <div style="border:1px solid black;margin:10px"> 
 
      Comments for code 5:aaa bbbbb cccc dddd eee ffff 
 
     </div> 
 
     <div style="border:1px solid black;margin:10px"> 
 
      Comments for code 6:aaa bbbbb cccc dddd eee ffff 
 
     </div> 
 
     <div style="border:1px solid black;margin:10px"> 
 
      Comments for code 7:aaa bbbbb cccc dddd eee ffff 
 
     </div> 
 
     <div style="border:1px solid black;margin:10px"> 
 
      Comments for code 8:aaa bbbbb cccc dddd eee ffff 
 
     </div> 
 
     <div style="border:1px solid black;margin:10px"> 
 
      Comments for code 9:aaa bbbbb cccc dddd eee ffff 
 
     </div> 
 
     <div style="border:1px solid black;margin:10px"> 
 
      Comments for code 10:aaa bbbbb cccc dddd eee ffff 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

我想你想對方旁邊2周的div滾動時的div要滾動其他分區這樣

$('#dv1').on("scroll",function(){ 
 
\t var t=$(this).scrollTop() 
 
\t $("#dv2").scrollTop(t) 
 
\t });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div style="width:100%"> 
 
    <div id="dv1" style="float:left;max-height:150px;width:45%;border:1px solid red;overflow:auto">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10</div> 
 
    <div id="dv2" style="float:left;max-height:150px;width:45%;border:1px solid green;overflow:hidden">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10</div> 
 
</div>