Show or hide a scrollbar automatically

As a user enters text into a field it can be useful to automatically show and hide a scrollbar for the field, as required.

Detecting when the user types

In this example we will handle the rawKeyDown message. The rawKeyDown message is sent whenever a character key is pressed (and whenever a mouse scroll wheel is used).

Note:  We use a rawKeyDown handler instead of a keyDown handler because keyDown recognizes keystrokes that don't correspond to a character. For example, pressing the Delete key sends a rawKeyDown message, but not a keyDown message.

The formattedHeight property

When a rawKeyDown message is received the formattedHeight property of the field is checked. The formattedHeight is the total height in pixels that the text would occupy if it were all displayed at once.

If the formattedHeight is larger than the field's height, the text is too large to fit completely within the visible area of the field. If the text won't fit a scrollbar should be shown, if it does fit the scrollbar should be hidden.

The vScrollbar property

The vScrollbar property specifies whether a field or a group has a vertical scrollbar.

The rawKeyDown handler

The rawKeyDown handler

The rawKeyDown message will be handled by the field script, allowing the handler to check the formattedHeight of the field and showing the scrollbar if necessary.

If the rawKeyDown message is trapped, the keystroke is not processed, so it's important to pass the message to allow the keystroke to appear. If the rawKeyDown message is not passed the user won't be able to type anything into the field.

on rawKeyDown
   if the formattedHeight of me > the height of me then
      ## there's too much text to fit
      ## so show a scrollbar:
      set the vScrollbar of me to true
      ## text will fit without scrolling
      ## get rid of the scrollbar
      set the vScrollbar of me to false
   end if
   ## let the keystroke be processed normally
   pass rawKeyDown 
end rawKeyDown 


Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.