Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Disable scrolling in a Panel
in my UI I use a Panel to use its scrolling features. But in some cases I want to disbale scrolling during runtime on client side. I tried two solutions without success.
- I set the height of the panel to "none": panel.getWidget().setHeight( "" ); (overflow-y is sett to scroll)
- I add a style name: panel.getWidget().addStyleDependentName( "without-scrolling" );, the style looks like this: ... overflow-y: hidden; ...
1. solution works quite fine (scrollbars are still visible, but enabled) but the problem is, if I have scrolled somewhere on the panel and set the height to none, the content of the panel is "scrolled" to the top left (it is not possible to attach an screenshot here (I have no webspace), there you could see it much better what I tried to explain).
I also tried to "re-position" the scroller via: panel.getWidget().scrollTop = oldTop;, but it has no affect.
2. solution you can not see any scrollbars but in some browser (Chrome, not in Firefox, Edge) I have the problem, that scrolling is still possible (inside my panel I attached a canvas object where I reallized some drag'n'drop functionality and when I reach the bottom of my panel with the dragged item the panel beginns to scroll.
Do you have any other ideas? The scrollbars must be disabled and no scroll functionality is allowed any more. Or is there another GUI element to reallize the scrollbars?