1.     first Column is fixed
2.     tfoot
3.     horizontal scroll bar of tfoot
4.     have hidden horizontal scroll bar of tbody.

1.  $(function() {
2.               $('#example').DataTable({        
3.             "fnInitComplete": function () {
4.                         // Disable scrolling in Head
5.                         $('.dataTables_scrollHead').css({
6.                             'overflow-y': 'hidden !important'
7.                         });
8.                         // Disable TBODY scroll bars
9.                         $('.dataTables_scrollBody').css({
10.                             'overflow-y': 'scroll',
11.                             'overflow-x': 'hidden',
12.                             'border': 'none'
13.                         });
14.                         // Enable TFOOT scoll bars
15.                         $('.dataTables_scrollFoot').css('overflow', 'auto');
16.                         //  Sync TFOOT scrolling with TBODY
17.                         $('.dataTables_scrollFoot').on('scroll', function () {
18.                             $('.dataTables_scrollBody').scrollLeft($(this).scrollLeft());
19.                         });
20.                     },
21.                 scrollX: true,
22.                 paging: true,
23.                 fixedColumns: {
24.                   leftColumns: 1
25.                 }
26.  });
27.         });

In that scenario, when you scroll to the right side, you will see that last row cell of fixed Column (background color: red) get messed up, because horizontal <tbody> scroll bar is hidden.

My question: Is there any way to correct this?

By the way: I had to hide <tbody> horizontal scroll bar because it doesn't get syncronized with <tfoot> scroll bar.

Many thanks