JavaScript Editor JavaScript Editor     JavaScript Debugger

Previous Section Next Section

Main Page

Scroll Bars

Anyone familiar with Windows knows what scroll bars are—those vertical or horizontal controls that display a scroll box or thumb that you can manipulate, and when you drag it to a new position, the value of the scroll bar changes, causing a corresponding action in the program. You can see scroll bars in our ScrollBars example on the CD-ROM at work in Figure 8.1. In that figure, I've docked two scroll bars to the edges of a form, and am using them to move a label (which displays the text "I'm moving!") around the form. There's also a horizontal scroll bar in this example that displays its value (which ranges from 0 to 100) directly in a text box.

Figure 8.1: Scroll bars at work.

There are two types of scroll bar controls—horizontal and vertical. There are two primary events for scroll bars—the Scroll event, which happens continuously as the scroll bar is scrolled, and the ValueChanged event, which occurs every time the scroll bar's value changes by even one unit (which means it'll happen many times during a normal scroll operation).

Most controls that typically use scroll bars come with them built in, such as multiline text boxes, list controls, or combo boxes. However, scroll bars still have their uses, as when you want to do some custom work, such as scrolling the image in a picture box (which does not come with built-in scroll bars—see "Scrolling Images" later in this chapter), or letting the user get visual feedback while setting numeric ranges, as when they're setting red, green, and blue values to select a color.

You use the Minimum and Maximum (formerly Min and Max) properties to set the range of values the user can select using the scroll bar. The LargeChange property sets the scroll increment that happens when the user clicks in the scroll bar but outside the scroll box. The SmallChange property sets the scroll increment when the user clicks the scroll arrows at each end of the scroll bar. The default values for the Minimum, Maximum, SmallChange, and LargeChange values are 0, 100, 1, and 10 respectively. You get the actual setting of a scroll bar with its Value property.


Actually, when setting the Maximum property for a scroll bar, you should keep in mind that the scroll bar can scroll up only to that maximum minus the width of the scroll box. For example, if you set the Minimum property to 0 and the Maximum property to 1,000, the actual maximum value the user can scroll to is 991.

Previous Section Next Section

JavaScript Editor Free JavaScript Editor     JavaScript Editor