0

Deriving from the case where a page jumps due to the introduction of a vertical scroll bar (as described here), I've decided to always display the bar with html { overflow-y: scroll !important; }, and not use a script listening for and changing window/document width. I'm thinking that styling the bar as completely transparent and button-less after page load (upon detection of the bar), giving it the appearance that there is no scrollbar, is another alternative. I've read that replacing RootPanel with RootLayoutPanel may also assist in this case, though that's out of the question in this specific instance.

How would I style the current native vertical scroll bar while avoiding the use of another wrapper panel or custom bar of any sort, as described here?

Here's how i'd detect a vertical scroll bar:

if( RootPanel.getBodyElement().getOffsetHeight() > Window.getClientHeight() )
    //bar is present

I hope this restyle wouldn't be visible to a user.

Community
  • 1
  • 1
foamroll
  • 752
  • 7
  • 23

1 Answers1

1

Native scroll-bars can be stylized only in certain browsers and using vendor specific syntax, see CSS customized scroll bar in div for a more complete answer.

So the response to your question, is that you can style scrollbars in IE, Webkit and Opera, but not in Firefox.

Related with the problem about page jumping when the scroll appears, it only can be fixed using js, or setting it always visible. The jumping effect cannot be solved with css though, in the browsers supporting css.

To avoid this problem, GWT developed the CustomScrollPanel which seems is not an option for you, IMO it works and performs well and I dont see any reason for not using it in this case.

Community
  • 1
  • 1
Manolo Carrasco Moñino
  • 9,723
  • 1
  • 22
  • 27