Question

我想知道是否有定制可在所有浏览器上运行的Handsontable滚动条的设计。

我设法使用:: webkit-scrollbar伪元素自定义Chrome和Safari的设计，如下所示：

<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);
}

但是，当我尝试添加一个更强大的基于JavaScript的解决方案，如完美的滚动条。它与Handsontable库和样式冲突，导致滚动不再正常工作。请参阅下面的示例。

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

我已经确定它是热构造函数中特别导致问题的“columnSorting”和“fixedColumnsLeft”属性。

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;
}

有谁知道如何修改上面示例中的代码才能正常工作？或者是一种允许我自定义Handsontable滚动条设计的不同方法？

Answer 1

我得到了它：http://albertogasparin.github.io/Optiscroll/

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

然后我需要一些自定义CSS（在这种情况下是SCSS）：

.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仍然有点粗略，但它至少有效。

自定义Handsontable滚动条设计

1 个答案: