Hiding scrollbar of fixed columns/rows with enableFixedColumnScroll/enableFixedRowScroll

[Liooo]

Currently enabling scroll on fixed columns shows scrollbars for both fixed/non-fixed columns. It'd be nice to be able to show scrollbar only on non-fixed columns. (same as rows)

[bvaughn]

To my knowledge, this isn't possible. Scrollbars are browser-managed. Without a custom scrolling solution (which RV doesn't really support, since it's hacky and generally bad for performance) there's not much I can do.

Please feel free to open a PR with any proposals you have if you're aware of something I'm not. 😄

[Liooo]

@bvaughn thanks for the quick response.

I did it before in my project and just dug up the commit now, this is basically what's hacky bad performance you referred to , correct? (though it only work on webkit)

diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss
index 1c2a9fe..3e868f7 100644
--- a/app/assets/stylesheets/main.scss
+++ b/app/assets/stylesheets/main.scss
@@ -211,3 +211,9 @@ html, body, example {
   //max-height: 800px!important;
 }
 
+.ReactVirtualized__MultiGrid__BottomLeft::-webkit-scrollbar{
+  display: none;
+}
+.ReactVirtualized__MultiGrid__TopRight::-webkit-scrollbar{
+  display: none;
+}
diff --git a/client/app/bundles/common/components/MultiGrid.js b/client/app/bundles/common/components/MultiGrid.js
index 5dec055..fb201c1 100644
--- a/client/app/bundles/common/components/MultiGrid.js
+++ b/client/app/bundles/common/components/MultiGrid.js
@@ -491,7 +491,7 @@ export default class MultiGrid extends PureComponent {
       this._bottomLeftGridStyle = {
         left: 0,
         overflowX: 'hidden',
-        overflowY: 'hidden',
+        overflowY: 'scroll',
         position: 'absolute',
         ...styleBottomLeftGrid
       }
@@ -530,7 +530,7 @@ export default class MultiGrid extends PureComponent {
     ) {
       this._topRightGridStyle = {
         left: this._getLeftGridWidth(props),
-        overflowX: 'hidden',
+        overflowX: 'scroll',
         overflowY: 'hidden',
         position: 'absolute',
         top: 0,
@@ -568,11 +568,13 @@ export default class MultiGrid extends PureComponent {
       _renderBottomLeftGrid (props) {
         .....

         {...props}
         cellRenderer={this._cellRendererBottomLeftGrid}
         columnCount={fixedColumnCount}
+        className="ReactVirtualized__MultiGrid__BottomLeft"
         height={this._getBottomGridHeight(props)}
         ref={this._bottomLeftGridRef}
         rowCount={Math.max(0, rowCount - fixedRowCount) + 1/* See _rowHeightBottomGrid */}
         rowHeight={this._rowHeightBottomGrid}
         scrollTop={scrollTop}
+        onScroll={({scrollTop})=>this._onScroll({scrollTop})}
         style={this._bottomLeftGridStyle}
         tabIndex={null}
         width={this._getLeftGridWidth(props)}

@@ -651,10 +654,12 @@ export default class MultiGrid extends PureComponent {

       _renderTopRightGrid (props) {
         .....

         cellRenderer={this._cellRendererTopRightGrid}
         columnCount={Math.max(0, columnCount - fixedColumnCount) + 1/* See _columnWidthRightGrid */}
         columnWidth={this._columnWidthRightGrid}
+        className="ReactVirtualized__MultiGrid__TopRight"
         height={this._getTopGridHeight(props)}
         ref={this._topRightGridRef}
         rowCount={fixedRowCount}
         scrollLeft={scrollLeft}
+        onScroll={({scrollLeft})=>this._onScroll({scrollLeft})}
         style={this._topRightGridStyle}
         tabIndex={null}
         width={this._getRightGridWidth(props)}

[RaviDasari]

@bvaughn , I fixed with simple css and an extra container. This stackoverflow is the inspiration for my solution. here is how it looks.

I tested this in latest chrome, firefox, edge and IE11 and it works. in short, I am simply hiding the scrollbar by adding an extra container. So I am sure this works in all browsers.

Are you cool with this fix ? I can raise a PR if you are okay.

[rhinoceraptor]

@RaviDasari is the change a PR to react virtualized, or can it be done without modifying react virtualized?

[RaviDasari]

@rhinoceraptor , We need to wrap the bottom left grid with a div and add some styles according to my post - (check stackoverflow link) above. So the changes need to be done to MultiGrid component.

I will raise a PR soon - in couple days.

[mattpage]

@RaviDasari +1

[mattpage]

@RaviDasari any word on this? Having a fixed row header without the scrollbar would be amazing!

[RaviDasari]

Just raised a PR. I think I still need to add new tests and fix tests. Will do soon.