Javascript 定制可手持滚动条设计

我想知道是否有任何方法来定制可在所有浏览器上使用的可手持滚动条的设计

我使用：：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);
}

有人知道我如何修改上面示例中的代码以正确工作吗？还是采用另一种方法来定制可手持滚动条的设计

2019年11月更新

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

---

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

我用它解决了这个问题：

然后我需要一些定制CSS（在本例中为SCS）：

---

Firefox仍然有点粗略，但它至少可以工作。

然后我需要一些定制CSS（在本例中为SCS）：

---

Firefox在这方面仍然有点粗略，但至少它能工作。

你找到解决方案了吗？@JamesKemp不幸的是，还没找到运气。我甚至问过掌上通话团队，他们无法提供一个明确的解决方案。该死！我在一些基于CSS的样式设计方面做得很好，但这取决于在mac上是否将滚动条设置为隐藏/可见。“如果我找到了解决办法，我会让你知道的。你有没有找到解决这个问题的办法？”杰姆斯肯普说，不幸的是，运气还不好。我甚至问过掌上通话团队，他们无法提供一个明确的解决方案。该死！我在一些基于CSS的样式设计方面做得很好，但这取决于在mac上是否将滚动条设置为隐藏/可见。如果我找到解决办法，我会告诉你的。

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

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

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