How To Sync The Scroll Of Two Divs By ID

I have two divs each taking up half the screen vertically. on one of them there is a scroll bar. On each of the divs there are waypoints, or id's. When scrolling, i want the scroll

Solution 1:

I think I understand what you want please try this and you can enhance the code

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

Solution 2:

I think you want 2 divs beside each other when you scroll div you want to scroll other div like this

$( '#dv1' ).on("scroll",function(){
	var t=$(this).scrollTop()
	$("#dv2").scrollTop(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>