How to sync the scroll of two divs by ID

Question

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 to align the two divs so that the same id's are always opposite each other.

An example is something like this http://jasmine.github.io/edge/introduction.html

`same id's` Are you using duplicate IDs? – A. Wolff Nov 22 '15 at 14:41 — A. Wolff, Nov 22 '15 at 14:41
What is the actual question? – charlietfl Nov 22 '15 at 14:45 — charlietfl, Nov 22 '15 at 14:45

score 0 · Answer 1 · answered Nov 22 '15 at 17:02

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>

"On each of the divs there are waypoints, or id's. ". The idea is to show code on one side and comments on the other. the code is always shorter. So I want the scroll of the code to stop, kind of hang in place, in view, while the comments continues to scroll. That until the comments finishes and then the next code snippet comes into view. — Aryeh Beitz, Nov 23 '15 at 10:04

Suhail Keyjani · Accepted Answer · 2015-11-23T15:32:51.330

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>

How to sync the scroll of two divs by ID

2 Answers2

Linked