// DATA_TEMPLATE: dom_data oTest.fnStart( "sScrollX / Y" ); $(document).ready( function () { // Force some x scrolling $('body').css('white-space', 'nowrap'); $('#container').css('width', '400px'); var oTable = $('#example').dataTable( { "sScrollX": "100%", "sScrollY": "200px", "bPaginate": false } ); oTest.fnWaitTest( "Header follows x-scrolling", function () { $('div.dataTables_scrollBody').scrollLeft(20); }, function () { return $('div.dataTables_scrollHead').scrollLeft() == 20; } ); oTest.fnWaitTest( "Footer follows x-scrolling", null, function () { return $('div.dataTables_scrollFoot').scrollLeft() == 20; } ); oTest.fnWaitTest( "y-scrolling has no effect on header", function () { $('div.dataTables_scrollBody').scrollTop(20); }, function () { return $('div.dataTables_scrollHead').scrollLeft() == 20; } ); oTest.fnWaitTest( "Filtering results in sets y-scroll back to 0", function () { oTable.fnFilter('1') }, function () { return $('div.dataTables_scrollBody').scrollTop() == 0; } ); oTest.fnWaitTest( "Filtering has no effect on x-scroll", null, function () { return $('div.dataTables_scrollBody').scrollLeft() == 20; } ); oTest.fnWaitTest( "Full x-scroll has header track all the way with it", function () { $('div.dataTables_scrollBody').scrollLeft( $('#example').width() - $('div.dataTables_scrollBody')[0].clientWidth ); }, function () { return $('div.dataTables_scrollBody').scrollLeft() == $('div.dataTables_scrollHead').scrollLeft(); } ); oTest.fnTest( "Footer also tracked all the way", null, function () { return $('div.dataTables_scrollBody').scrollLeft() == $('div.dataTables_scrollFoot').scrollLeft(); } ); oTest.fnComplete(); } );