Handsontable scroll example

HTML

<div id="table" class="hot handsontable htRowHeaders htColumnHeaders">

CSS

.table-container {
    display: block;
    height: 338px;
    width: 338px;
    position: relative;
}

.table-handsontable {
    overflow: hidden;
    position: absolute;
    top: 0px;
    bottom: 54px;
    width: 100%;
}

.content1 {
    background-color: #44AAFF;
    border: solid black 2px;
    
    position: absolute;
    width: 350px;
    height: 50px;
    
    bottom: 0;
    left: 0;
    right: 0;
}

.content2 {
    background-color: #FFAA44;
    border: solid black 2px;
    width: 350px;
    height: 50px;
}

</style><!-- Ugly Hack due to jsFiddle issue -->

<!--script src="http://docs.handsontable.com/bower_components/handsontable/dist/handsontable.full.js"></script-->
<!--link type="text/css" rel="stylesheet" href="http://docs.handsontable.com/bower_components/handsontable/dist/handsontable.full.min.css"-->

<script src="http://docs.handsontable.com/pro/1.0.0/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://docs.handsontable.com/pro/1.0.0/bower_components/handsontable-pro/dist/handsontable.full.min.css">

JavaScript

document.addEventListener("DOMContentLoaded", function() {

  var
    table = document.getElementById('table'),
    hot1;
  
  hot1 = new Handsontable(table,{
    data: Handsontable.helper.createSpreadsheetData(10, 10),
    colHeaders: true,
    renderAllRows: true,
    manualColumnMove: true,
    afterGetColHeader: function(col){
    	console.log(col);
    }
  });

});