Как синхронизировать свиток двух divs по ID

Question

У меня есть два divs, каждый из которых занимает половину экрана по вертикали. на одном из них имеется полоса прокрутки.
На каждом из div есть путевые точки, или id.
При прокрутке я хочу, чтобы свиток выравнивал два div, так что одинаковые идентификаторы всегда противоположны друг другу.

Примером может служить что-то вроде этого http://jasmine.github.io/edge/introduction.html

Answer 1

I думаю, что я понимаю, что вы хотите, пожалуйста, попробуйте это и вы можете улучшить код

$('#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>