Edit in JSFiddle

var scComponents = [];
var scEditorComponents = [];

/*both array need to be the same length, but with different height in the children*/
function createArray() {
	
  $( "#stationCard .component").each(function( index ) {
    scComponents.push($(this).height());
  });

  $( "#stationEditor .component" ).each(function( index ) {
    scEditorComponents.push($(this).height());
  });  
};

function calculateScroll() {
	var leftScrollTop = $('#stationCard').scrollTop()
  var rightScrollTop = $('#stationEditor').scrollTop();

	var totalHeightLeft = 0;  
  var indexLeftFound = null;
  var temp;
  var flag = false;
  
  for (var i = 0; i < scComponents.length ;i++) { 
  	var height = scComponents[i];    
  	totalHeightLeft = totalHeightLeft + height;
  
  	if(leftScrollTop < totalHeightLeft && !flag) {
      indexLeftFound = i;
      temp = totalHeightLeft - height;
      flag = true;
    }    
  }
  
  //calculate relative height scrolling - scrollFactor = (PL1-(L0)) / L1 ==> (20-0)/30 = 2/3 
  var scrollFactorLeft =  (leftScrollTop - temp)  / scComponents[indexLeftFound];
  
  //- calculate the right side scrolling by using the factor and the relative R point - in this case R2 (correspond to L2) - R0 + R1 + 3/7 * R2 ==> 0 + 40 + 3/7*50 = 40+21.4=61.4 
  
  var scrollTopRightResult;
  var temp2 = 0;
  
  for (var i = 0; i < indexLeftFound;i++) { 
     temp2 = temp2 + scEditorComponents[i] ;
  }    
  scrollTopRightResult = temp2 + scrollFactorLeft * scEditorComponents[indexLeftFound];
   $('#stationEditor').scrollTop(scrollTopRightResult);
  
};

$( document ).ready(function() {
  createArray();  
  
   $( "#stationCard" ).scroll(function() {
    	calculateScroll();
   });
  
});

<div id="stationCard" class="guideLine container js-scrollSyn">
  <div id="sc1" class="component guideLine" style="height:300px">
    1
  </div>
  <div id="sc2" class="component guideLine" style="height:700px">
    2
  </div>
  <div id="sc3" class="component guideLine" style="height:500px">
    3
  </div>
  <div id="sc4" class="component guideLine" style="height:500px">
    4
  </div>
  <div id="sc5" class="component guideLine" style="height:300px">
    5
  </div>

</div>

<div id="stationEditor" class="guideLine container js-scrollSyn">
 
  <div id="scEditor1" class="component guideLine" style="height:400px">
    1
  </div>
  <div id="scEditor2" class="component guideLine" style="height:500px">
    2
  </div>
  <div id="scEditor3" class="component guideLine" style="height:900px">
    3
  </div>
  
  <div id="scEditor4" class="component guideLine" style="height:0px">
    4
  </div>
  
 <div id="scEditor5" class="component guideLine" style="height:300px">
    5
  </div>

</div>

.guideLine {
 border: 1px dashed red;
}

.container  {
  width: 40%;
  float: left;
  padding: 4px;
  overflow-y: auto;
  overflow-x: hidden;
}

#stationCard {  
  height: 400px;
  margin-right: 10px;
}

#stationEditor {  
  height: 700px;
}

.component {
  background: gray;
  height: 100px;
  margin-bottom:8px;
  overflow: hidden;
}