HTML CODE
<div id="scrollidout" style="overflow: auto; overflow-y: hidden; ">
<div id="scrollidin" style="padding-top: 1px; height: 20px; width: 1000px"> </div>
</div>
<div class="resultcontent" style="overflow: auto; overflow-y: hidden; " id="resultcontent" >
SEARCH RESULTS HERE
<div id="scrollidin12" style="padding-top: 1px; height: 190px; width: 3200px">
klklklklkklklklklkklklklklkklklklklkklklklklkklklklklkklklklklkklklklklkklklklklkklklklklkklklklklkklklklklkklklklklkklklklklkklklklklkklklklklkklklklklkklklklklkklklklklkklklklklkklklklklkklklklklkklklklklkklklklklkklklklklkklklklkklklklklkklklklklkklklklklkklklklklkklklklklk
</div>
</div>
JAVASCRIPT CODE
$(function(){
$('#scrollidout').on('scroll', function(){
$('#resultcontent')
.scrollLeft($('#scrollidout').scrollLeft());
});
$('#resultcontent').on('scroll', function(){
$('#scrollidout')
.scrollLeft($('#resultcontent').scrollLeft());
});
});
Upon initial load, everything works as expected. However, when I update the content of the "#resultcontent" div using Ajax, the top scrollbar no longer scrolls the div. How can I fix this issue?