Customize Handsontable Scroll Bar Design

Question

I was wondering if there is anyway to customize the design of the Handsontable scroll bars that will work on all browsers.

I managed to customise the design for Chrome and Safari using the ::webkit-scrollbar pseudo element as follows:

<div id="hot-container-1">
  <div id="hot-1"></div>
</div>

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

#hot-1 ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.0);
}

#hot-1:hover ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.5);
}

But when I try to add in a more robust and JavaScript based solution such as perfect scrollbar. It conflicts with the Handsontable library and styling and causes the scrolling to no longer work correctly. See fiddle of my example below.

https://jsfiddle.net/JoshAdams/aman7krj/

I have identified that it is specifically the "columnSorting" and "fixedColumnsLeft" properties in the hot constructor that are causing the issues.

var constructHot = function (container, tableName) {
  var hot = new Handsontable(container, {
    data: Handsontable.helper.createSpreadsheetData(100, 8),
    rowHeaders: true,
    colHeaders: true,
    // Causing perfect scrollbar library conflicts
    columnSorting: true,
    fixedColumnsLeft: 1
  });
  return hot;
}

Does anyone know how I can modify the code in the example above to work correctly? Or a different approach that allows me to customize the Handsontable scroll bar design?

Update November 2019

Updating the Handsontable library to version 7.2.2 appears to allow the perfect scrollbar to work correctly with the exception of one minor issue. Which is the row and column headers are no longer sized correctly. See screenshot below...

https://jsfiddle.net/JoshAdams/aman7krj/

Anyone know how to fix this?

Answer 1

I got it working with this: http://albertogasparin.github.io/Optiscroll/

const table = document.querySelector( '#table .ht_master' );
new Optiscroll( table, {
    wrapContent: false,
    forceScrollbars: true
} );

Then I needed some custom CSS (or SCSS in this case):

.ht_master .wtHider {
    padding-right: $scrollbarWidth - 1 !important;
    padding-bottom: $scrollbarWidth - 1 !important;
}

.ht_clone_top .wtHider {
    padding-right: $scrollbarWidth !important;
}

.ht_clone_left .wtHider {
    padding-bottom: $scrollbarWidth !important;
}

.optiscroll-content {
    right: auto !important;
    bottom: auto !important;
}

.has-vtrack .optiscroll-vtrack,
.has-htrack .optiscroll-htrack {
    opacity: 1;
}

.optiscroll-v,
.optiscroll-h {
    visibility: visible;
    z-index: 1000;
}

.optiscroll-v {
    top: 0;
    bottom: 0;
    width: $scrollbarWidth;
    background: map-get($colors, cellHeader);
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    border-left: 1px solid map-get($colors, border);
}

.optiscroll-vtrack {
    width: $scrollbarWidth - 4;
    right: 2px;
}

.optiscroll-h {
    left: 0;
    right: 0;
    height: $scrollbarWidth;
    background: map-get($colors, cellHeader);
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    border-top: 1px solid map-get($colors, border);
}

.optiscroll-htrack {
    height: $scrollbarWidth - 4;
    bottom: 2px;
}

.has-vtrack.has-htrack .optiscroll-v { border-bottom: $scrollbarWidth + 3 solid transparent; }
.has-vtrack.has-htrack .optiscroll-h { border-right: $scrollbarWidth + 3 solid transparent; }

Firefox is still a little sketchy with it, but it at least works.