Is there a better way to lock the main scroll bar without hiding it in GWT?

Question

I set my body element to

body {
   overflow-y: scroll;
 }

This creates a scroll bar on my body element. When I create a scrollbar and scroll to the bottom the main area of my page is also scrolled.

I found some posts on this topic: Prevent scrolling of parent element? prevent Scroll "bubbling" from element to window but these are not applicable for GWT.

I tried the following:

@UiHandler("panel")
void onPanelMouseOver(MouseOverEvent event) {
    Window.enableScrolling(false);
}


@UiHandler("panel")
void onPanelMouseOut(MouseOutEvent event) {
    Window.enableScrolling(true);
}

This is a bad solution because the main scroll bar disappear and the page is moving from left to right and back. I want to lock the scroll bar not hide it. Hiding will move the screen.

Is there a better way to lock the main scroll bar in GWT?

check the answer here http://stackoverflow.com/questions/8701754/just-disable-scroll-not-hide-it?rq=1 , according to this answer you may need to use some JSNI (Gquery). — timmz, Feb 13 '14 at 18:10

Abhijith Nagaraja · Accepted Answer · 2014-02-14T09:04:39.033

1

For this purpose only gwt introduced concept of layout panels. Use RootLayout Panel and other layout panels. Then your applications won't have body scrolls if you maintain the hierarchy. Layout panels also resizes child widgets on browser resize. So you will get an added advantage

EDIT

If you want a fixed header and scroll on the rest of the part, use RootLayoutPanel and add DockLayoutPanel to it. Set your header panel to dockPanel North side and add scroll panel to the center of the dockPanel

FlowPanel headerPanel = new FlowPanel();
headerPanel.setWidth("100%");

ScrollPanel bodyPanel = new ScrollPanel();

DockLayoutPanel myApp = new DockLayoutPanel(Unit.PX);
myApp.addNorth(headerPanel, 100);
myApp.add(bodyPanel);

RootLayoutPanel.get().add();

edited Feb 14 '14 at 09:04

answered Feb 13 '14 at 20:06

Abhijith Nagaraja

3,260
4
23
54

The problem with layout panels is that you do not get a scroll bar on the body. This is needed to make a fixed header. If you add a ScrollPanel to the RootLayoutPanel add a fixed header with width 100% then the header overlaps the ScrollPanel. – confile Feb 13 '14 at 21:48
But how does this solve my problem? Is the scroll event not bubbling to the parent scroll panel? – confile Feb 14 '14 at 12:25
When I use DockLayoutPanel will it work when I do event.preventDefaults() and event.stopPropagation() ? – confile Feb 17 '14 at 12:24

score -1 · Answer 2 · answered Feb 13 '14 at 16:07

-1

To hide and lock the scrollbar of the body

  body {
        overflow:hidden;
    }

answered Feb 13 '14 at 16:07

Momo

2,423
4
29
51

Window.enableScrolling(false); does that. This is exactly what I don't want. – confile Feb 13 '14 at 16:14
I want to lock the scroll bar not hide it. Hiding will move the screen. – confile Feb 13 '14 at 16:15
Well you question should be then :Is there a better way to lock the main scroll bar without hidding it in GWT? – Momo Feb 13 '14 at 16:24
Okay, can you answer this question? – confile Feb 13 '14 at 17:15

Is there a better way to lock the main scroll bar without hiding it in GWT?

2 Answers2