自定义 Handsontable 滚动条设计答案

【问题标题】：Customize Handsontable Scroll Bar Design自定义 Handsontable 滚动条设计
【发布时间】：2018-07-30 10:50:48
【问题描述】：

我想知道是否可以自定义适用于所有浏览器的 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 滚动条设计的不同方法？

2019 年 11 月更新

将 Handsontable 库更新到版本 7.2.2 似乎可以让完美的滚动条正常工作，但有一个小问题除外。这是行标题和列标题的大小不再正确。请看下面的截图...

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

有人知道如何解决这个问题吗？

【问题讨论】：

你找到解决办法了吗？
@JamesKemp 不幸的是还没有运气。我什至问过handsontable 团队，他们无法提供明确的解决方案。
该死！我在一些基于 CSS 的样式方面已经走得很远了，但是根据您是否在 Mac 上将滚动条设置为隐藏/可见，存在一些问题。如果我找到解决方案，我会通知您。

标签： javascript html css handsontable

【解决方案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 仍然有点粗略，但至少可以工作。

【讨论】：