文章/答案/技术大牛

发布

社区首页 >问答首页 >自定义可处理卷轴条设计

问自定义可处理卷轴条设计
EN

Stack Overflow用户

提问于 2018-02-20 06:24:40

回答 1查看 1.2K关注 0票数 0

我想知道是否存在自定义将在所有浏览器上工作的Handsontable滚动条的设计。

我设法使用：：webkit-滚动条伪元素定制了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/

有人知道怎么解决这个问题吗？

css

handsontable

javascript

html

回答 1

Stack Overflow用户

发布于 2018-03-09 16:37:53

我把它处理好了：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; }

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48879106

复制

相似问题

问自定义可处理卷轴条设计
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自定义可处理卷轴条设计EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自定义可处理卷轴条设计
EN