React when a scrollbar activates

Question

I have a TextInput in a container. I need the horizontal scrolling capabilities of the container so that when the textInput is to big it allows me to scroll to see the text on the left and right. The scrollbar track and thumb were set to null so I can see the text.

                    trackSkin: ClassReference(null);
        thumbUpSkin: ClassReference(null);
        thumbOverSkin: ClassReference(null);
        thumbDownSkin: ClassReference(null);
        thumbSkin: ClassReference(null);

Now I want to listen to an event or watch a property that changes when the horizontal scrollbar activates. Then I would like to set a padding on the container or left and right property on the text input so that the left and right arrows do not get in the way of the user to see the first and last characters.

Thanks

Answer 1

Before adding listeners and accessing the HScrollBar of the Scroller, you may find this setting/variable of some use: measuredSizeIncludesScrollBars

From the API: (Please forgive the terrible formatting)

If true, the Scroller's measured size includes the space required for the visible scroll bars, otherwise the Scroller's measured size depends only on its viewport.

Components like TextArea, which "reflow" their contents to fit the available width or height may use this property to stabilize their measured size. By default a TextArea's is defined by its widthInChars and heightInChars properties and in many applications it's preferable for the measured size to remain constant, event when scroll bars are displayed by the TextArea skin's Scroller.

In components where the content does not reflow, like a typical List's items, the default behavior is preferable because it makes it less likely that the component's content will be obscured by a scroll bar.

In the event this doesn't work, I would probably add an event listener attached to the lifecycle of the Scroller. During that event handling, I would check to see if the Scrollbar was null or not. If it wasn't, I would store it off to the side, but not before adding a listener to its "show" and "hide" event. That way, you can kick off whatever you need to whenever the scrollbar changes its state.