Only Enable Scrolling after Handsontable Select

Tags: #<Tag:0x00007efc6a39d948>
#1

Hi,

We want to only enable scrolling of handsontable only after the handsontable is selected. Currently, when you scroll down, when you get to the handsontable the handsontable begins to scroll. But we want to disable this when handsontable is not selected, and enable it when handsontlabe is selected.

Is there a way to implement this on the handsontable in this demo?: https://stackblitz.com/edit/react-handsontable-test-collapse-dtkwag?file=index.js

I couldn’t find any issue on disable scrolling other than this issue: How To Disable Scrolling In HandsOnTable?, but I couldn’t find anything helpful in here.

Thanks

#2

Hi @nick

We have option preventOverflow that should solve this problem, however the disadvantage of using it is that you can’t have specified height of the table, like here:

https://jsfiddle.net/aszymanski/gptvczrh/1/

The other solution might be to block scrolling by CSS and change it in, for example, afterOnCellMouseDown hook, but we don’t have examples for this.

#3

Thanks.

The preventOverflow option isn’t going to work because we need to fix height.

I tried the afterOnCellMouseDown option but it doesn’t seem to render all the rows to scroll through? It stops after rendering just a few more rows.

I’ve added it to the demo here: https://jsfiddle.net/ntel_91/np20yvb6/25/

Also, is there some hook to recognize when we click outside of the handsontable? I want to disable the scroll when we are not html isn’t focused on the handsontable.

#4

Hi @nick

I’m afraid that can be hard to achieve as when you block the overflow in CSS it has impact on the Handsontable, where, as we know, preventing overflow doesn’t work well with table height specified. That might cause the problem with rendering after a few scrolls.

About your second question. We don’t have such a hook, all of them are designed to work inside the table.

#5

Are there any other work-arounds that you or @aleksandra_budnik can think of that we could try?

#6

@nick after a quick brainstorm we created a demo based on the wheel event. Would that work for you https://jsfiddle.net/n1j8h0ad/?

#7

@aleksandra_budnik, this doesn’t work because it disables scroll on the page entirely if you are hovering over the table.

We are trying to implement the ability to scroll through the entire page (even if it is hovering over the handsontable), and then enable the scroll on the handsontable only AFTER you select the table.

#8

I see, at the moment, you should have a cursor outside of the table to scroll. So you may try adding an additional DIV element to Handsontable and then block it. Nevertheless, we do not support such a functionality out of the box, so those are only guesses.

#9