ScrollTop with fixed columns gives screen refresh problem
ScrollTop with fixed columns gives screen refresh problem

I have datatable with few column fixed on left and right. To jump to a particular row i am using ScrollTop option once page loads.
What is happening is the right fixed columns are shown correctly and scrolled, but the fixed columns still shows rows which are topmost rows. As soon as i slightly scroll using scroll bar everything is back to normal.
The code snippet is as below
var newId = '#inlineSection';
var inlineTable = $(newId).dataTable({
scrollY:'450px',
AutoWidth: false,
scrollX: '100%',
//sScrollXInner:'20%',
scrollCollapse: false,
paging: true,
bPaginate: true,
lengthMenu: [
[15, 30, 45, -1],
[15, 30, 45, "All"]
],
iDisplayLength:Number(recordCount),
"sDom": '<"top"i>rt<"bottom"flp><"clear">',
"sPaginationType": "full_numbers",
filter: false,
bFilter: true,
bDestroy: true,
orderClasses: false,
ordering: false,
bSort: false
});
new $.fn.dataTable.FixedColumns(inlineTable, {
leftColumns: 8,
rightColumns: 1,
iRightWidth: 72
});
var search = document.getElementById('{!$Component.specForm.searchHid}').value;
//alert(search);
if(search != 'undefined' || search != ''){
document.getElementById('globalSearchBox').value = search;
globalSearch();
}
var table = $('#inlineSection').DataTable();
var info = table.page.info();
var pageNo = document.getElementById('{!$Component.specForm.pageNumber}').value;
if(pageNo != '' && pageNo != 0 && info.length != -1){
var table = $('#inlineSection').dataTable();
table.fnPageChange(Number(pageNo));
}
var editRecIndex = $("[id$='recEditIndex']").val();
var editRecClass = "tr." + editRecIndex + "_abc";
if(editRecIndex != '' && $(editRecClass).offset() != 'undefined' ){
$(".dataTables_scrollBody").scrollTop($(editRecClass).offset().top - $(".dataTables_scrollBody").height());
}
Answers
Here is the fiddle that exactly shows my problem. Wait for 4 sec when it scrolls down.
Now the fixed rows on left are not aligned with the one on right
https://jsfiddle.net/sankkyy/u191awmj/22/