自定义可手动调节的滚动条设计 [英] Customize Handsontable Scroll Bar Design

问题描述

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

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

 < div id = hot-container-1> 
< div id = hot-1>< / div> 
< / div> 
 
 ::-webkit-scrollbar {
 width：10px; 
高度：10像素； 
} 
 
＃hot-1 ::-webkit-scrollbar-thumb {
背景：rgba（0，0，0，0.0）; 
} 
 
＃hot-1：hover ::-webkit-scrollbar-thumb {
背景：rgba（0，0，0，0.5）; 
} 
  

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

任何人都知道如何要解决此问题？

解决方案

我可以使用此解决方案： 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：自动！important; 
} 
 
 .has-vtrack .optiscroll-vtrack，
 .has-htrack .optiscroll-htrack {
 opacity：1; 
} 
 
 .optiscroll-v，
 .optiscroll-h {
可见性：可见； 
 z-index：1000； 
} 
 
 .optiscroll-v {
 top：0; 
底部：0； 
 width：$ scrollbarWidth; 
背景：map-get（$ colors，cellHeader）; 
 border-top：2px纯透明； 
 border-bottom：2px纯透明； 
 border-left：1px solid map-get（$ colors，border）; 
} 
 
 .optiscroll-vtrack {
 width：$ scrollbarWidth-4; 
右边：2px； 
} 
 
 .optiscroll-h {
 left：0; 
右：0； 
高度：$ scrollbarWidth; 
背景：map-get（$ colors，cellHeader）; 
 border-left：2px纯透明； 
 border-right：2px纯透明； 
 border-top：1px实体地图获取（$ colors，border）; 
} 
 
 .optiscroll-htrack {
 height：$ scrollbarWidth-4; 
底部：2px； 
} 
 
 .has-vtrack.has-htrack .optiscroll-v {border-bottom：$ scrollbarWidth + 3 solid transparent; } 
 .has-vtrack.has-htrack .optiscroll-h {border-right：$ scrollbarWidth + 3实心透明； } 
  

Firefox仍然有点粗略，但至少可以使用。

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?

解决方案

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.

这篇关于自定义可手动调节的滚动条设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！