Options class (ScrollBar)

The adjustThumbPos field specifies whether the thumb's position is automatically shown on the exactly scroll bar's value, while user drags the control's thumb. The adjustThumbPos field is used to control the behavior of the scroll bar's thumb during user interaction. When set to true, the thumb's position will be automatically adjusted to reflect the exact value of the scroll bar as the user drags it, providing real-time feedback on the current scroll position. When set to false, no adjustment for the thumb's position is performed while the user drags it, and the thumb will only be positioned at the scroll bar's newly value once the drag ends. This option allows for a more responsive and interactive scrolling experience, giving users immediate visual feedback on their actions.

The adjustThumbPos field is mapped to the AdjustThumbPos property, which means that the following statements are equivalent:

oScrollBar.Options = {adjustThumbPos: true}
oScrollBar.SetOptions({adjustThumbPos: true})
oScrollBar.AdjustThumbPos = true
oScrollBar.SetAdjustThumbPos(true)

false {boolean}, no adjustment for the thumb's position is performed while user drags it. Once the drag ends, the thumb is positioned at scroll's newly value.
true {boolean}, thumb's position is automatically adjusted at exactly scroll's value, while user drags it

The allowKeys field specifies whether the scroll-bar changes its value/position on keys. The allowKeys field is used to enable or disable keyboard interaction with the scroll bar. When set to true, users can change the scroll bar's value using specific keys such as "ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", "PageUp", "PageDown", "Home", and "End". This allows for improved accessibility and convenience for users who prefer keyboard navigation. However, for the scroll bar to receive key events, the owner canvas element must include the "tabindex" attribute, which indicates that the element can be focused and participate in sequential keyboard navigation. If allowKeys is set to false, the scroll bar will not respond to any key events, providing a more controlled user experience when keyboard interaction is not desired.

The allowKeys field is mapped to the AllowKeys property, which means that the following statements are equivalent:

oScrollBar.Options = {allowKeys: true}
oScrollBar.SetOptions({allowKeys: true})
oScrollBar.AllowKeys = true
oScrollBar.SetAllowKeys(true)

null {null}, uses the default allowKeys value. By default, the allowKeys is false, which indicates that no keys support
false {boolean}, no keys support for the scroll bar
true {boolean}, the scroll's value can be changed using keys such as: "ArrowLeft-ArrowUp", "ArrowRight-ArrowDown", "PageUp", "PageDown", "Home" and "End". The owner canvas element must include the "tabindex" attribute, else the scroll bar receives no key events at all. The tabindex global attribute indicates if its element can be focused, and if/where it participates in sequential keyboard navigation (usually with the Tab key, hence the name).

The allowScrollDirect field specifies whether the control scrolls directly to the value from the cursor, while user right-clicks the control. The allowScrollDirect field is used to enable or disable direct scrolling to a specific value when the user right-clicks on the control. When set to true, the scroll bar will jump directly to the value corresponding to the cursor's position upon a right-click, providing a quick way for users to navigate through content. This feature can enhance user experience by allowing for more efficient scrolling, especially in scenarios where users need to quickly access specific sections of content. If allowScrollDirect is set to false, right-clicking on the control will not trigger any scrolling action, and the scroll bar will only respond to other forms of interaction such as dragging the thumb or using keyboard keys.

The allowScrollDirect property can be any of the following values:

• 0, no button
• 1, primary button (usually left)
• 2, secondary button (usually right)
• 4, auxilary button (usually middle or mouse wheel button)
• 8, 4th button (typically the "Browser Back" button)
• 16, 5th button (typically the "Browser Forward" button)

The allowScrollDirect field is mapped to the AllowScrollDirect property, which means that the following statements are equivalent:

oScrollBar.Options = {allowScrollDirect: 2}
oScrollBar.SetOptions({allowScrollDirect: 2})
oScrollBar.AllowScrollDirect = 2
oScrollBar.SetAllowScrollDirect(2)

null {null}, uses the default allowScrollDirect value. By default, the allowScrollDirect is: 2 (right mouse button)
0 {number}, disables the allowScrollDirect feature
4 {number}, indicates that the scroll jumps to value directly once the user clicks the middle-button of the mouse

The buttonSize field indicates the size of the buttons within a scroll bar. The buttonSize field is used to specify the dimensions of the scroll bar's buttons, which can enhance the user interface by making the buttons larger or smaller based on user preferences or design requirements. By default, the buttonSize is set to 16 pixels, providing a standard size for the buttons. However, you can customize this value to better fit the overall design of your application or to improve accessibility for users who may have difficulty interacting with smaller buttons. Setting buttonSize to 0 will hide the buttons entirely, while setting it to a larger value will make them more prominent and easier to click.

The buttonSize field is mapped to the ButtonSize property, which means that the following statements are equivalent:

oScrollBar.Options = {buttonSize: 18}
oScrollBar.SetOptions({buttonSize: 18})
oScrollBar.ButtonSize = 18
oScrollBar.SetButtonSize(18)

null {null}, uses the default buttonSize value. By default, the buttonSize is 16.
0 {number}, the scroll displays no buttons
18 {number}, defines the scroll's buttons to 18-pixels

The cursors field specifies the mouse cursor to be displayed when pointing over a part of the control. The cursors field is used to enhance the user experience by providing visual feedback on the interactivity of different parts of the scroll bar. By defining specific cursors for parts such as the left/top button, thumb, and right/bottom button, you can indicate to users that these elements are interactive and can be clicked or dragged. The cursors can be defined using standard CSS cursor values, allowing you to choose from a wide range of cursor styles to best fit the design and functionality of your application.

The format of the property is:

"cursor(part),cursor(part),..."

where:

• "cursor", defines the CSS mouse cursor to display while cursor hovers the part
• "part", defines the name of the part the cursor is applied on (as defined bellow)

The "cursor" can be any of the following:

Cursor	Description
"alias"	indicates a shortcut or alias will be created
"all-scroll"	indicates scrolling in any direction
"auto"	lets the browser decide the cursor based on context
"cell"	indicates a table cell
"col-resize"	indicates a column can be resized horizontally
"context-menu"	indicates a context menu is available
"copy"	indicates something will be copied
"crosshair"	a precise crosshair cursor
"default"	the default arrow cursor
"e-resize"	resize east (right edge)
"ew-resize"	resize horizontally
"grab"	indicates an item can be grabbed
"grabbing"	indicates an item is being grabbed
"help"	indicates help information is available
"move"	indicates something can be moved
"n-resize"	resize north (top edge)
"ne-resize"	resize northeast (top-right corner)
"nesw-resize"	resize along the northeast–southwest axis
"no-drop"	indicates dropping is not permitted
"not-allowed"	indicates the action is not allowed
"ns-resize"	resize vertically
"nw-resize"	resize northwest (top-left corner)
"nwse-resize"	resize along the northwest–southeast axis
"pointer"	the pointer cursor (a hand with a pointing finger)
"progress"	indicates background processing
"row-resize"	indicates a row can be resized vertically
"s-resize"	resize south (bottom edge)
"se-resize"	resize southeast (bottom-right corner)
"sw-resize"	resize southwest (bottom-left corner)
"text"	the text selection cursor (I-beam)
"url(...)"	uses a custom cursor image (with optional fallback)
"vertical-text"	the vertical text selection cursor
"w-resize"	resize west (left edge)
"wait"	indicates the program is busy
"zoom-in"	indicates zooming in
"zoom-out"	indicates zooming out

The "part" can be any of the following:

Part	Description
"b" (exBackgroundPart)	specifies the control's background part (union between the exLowerBackPart("lo") and the exUpperBackPart("up") parts)
"l" (exLeftBPart, <)	indicates the left or top button of the scroll bar
"l1" (exLeftB1Part)	indicates the first additional button, in the left or top area
"l2" (exLeftB2Part)	indicates the second additional button, in the left or top area
"l3" (exLeftB3Part)	indicates the third additional button, in the left or top area
"l4" (exLeftB4Part)	indicates the forth additional button, in the left or top area
"l5" (exLeftB5Part)	indicates the fifth additional button, in the left or top area
"lo" (exLowerBackPart)	specifies the control's lower-background part (area between the left/top button and the thumb)
"r" (exRightBPart, >)	indicates the right or down button
"r1" (exRightB1Part)	indicates the first additional button in the right or down side
"r2" (exRightB2Part)	indicates the second additional button in the right or down side
"r3" (exRightB3Part)	indicates the third additional button in the right or down side
"r4" (exRightB4Part)	indicates the forth additional button in the right or down side
"r5" (exRightB5Part)	indicates the fifth additional button in the right or down side
"r6" (exRightB6Part)	indicates sixth additional button in the right or down side
"t" (thumb)	indicates the scroll's thumb
"up" (exUpperBackPart)	specifies the control's upper-background part (area between the thumb and the right/bottom button)

The cursors field is mapped to the Cursors property, which means that the following statements are equivalent:

oScrollBar.Options = {cursors: "pointer(l,t,r)"}
oScrollBar.SetOptions({cursors: "pointer(l,t,r)"})
oScrollBar.Cursors = "pointer(l,t,r)"
oScrollBar.SetCursors("pointer(l,t,r)")

null {null}, uses the default cursors value. By default, the cursors is "auto(l1,l2,l3,l4,l5,l,lo,t,up,r,r1,r2,r3,r4,r5,r6)", or the "auto" mouse cursor is displayed for any part of the control
"crosshair(lo,up,b),pointer(t)" {string}, indicates that the "crosshair" mouse cursor is shown once the cursor hovers the control "upper", "lower" or "background" part, and "pointer" mouse cursor while cursor hovers the "thumb" part

The disableNoScroll field specifies whether the scroll bar's parts are enabled/shown or disabled/hidden, when no scroll is possible. The disableNoScroll field is used to control the visibility and interactivity of the scroll bar when there is no content to scroll. When set to exHideNoScroll, the scroll bar will be hidden entirely if no scrolling is possible, providing a cleaner interface when the scroll bar is not needed. When set to exDisableNoScroll, the scroll bar will remain visible but its buttons will be disabled, indicating to users that scrolling is not currently possible. When set to exShowNoScroll, the scroll bar will be visible and enabled even when there is no content to scroll, which can be useful for maintaining a consistent user interface regardless of the content state. This option allows for greater flexibility in how the scroll bar is presented and can enhance user experience by providing visual cues about the availability of scrolling.

The ScrollBar.DisableNoScrollEnum type supports the following values:

• exHideNoScroll (0), specifies that the scroll bar is hidden if no scroll is possible (while it is hosted by an exontrol.W)
• exDisableNoScroll (1), specifies that the scroll bar's buttons are disabled when no scroll is possible.
• exShowNoScroll (2), specifies that the scroll bar is visible even no scroll is possible

The disableNoScroll field is mapped to the DisableNoScroll property, which means that the following statements are equivalent:

oScrollBar.Options = {disableNoScroll: ScrollBar.DisableNoScrollEnum.exShowNoScroll}
oScrollBar.SetOptions({disableNoScroll: ScrollBar.DisableNoScrollEnum.exShowNoScroll})
oScrollBar.DisableNoScroll = ScrollBar.DisableNoScrollEnum.exShowNoScroll
oScrollBar.SetDisableNoScroll(ScrollBar.DisableNoScrollEnum.exShowNoScroll)

null {null}, uses the default disableNoScroll value. By default, the disableNoScroll is ScrollBar.DisableNoScrollEnum.exDisableNoScroll
2 or ScrollBar.DisableNoScrollEnum.exShowNoScroll {number}, specifies that the scroll bar is visible even no scroll is possible

The enableParts field defines the enabled parts of the scroll bar, separated by comma. The enableParts field is used to specify which parts of the scroll bar are enabled for user interaction. By defining the enabled parts, you can control how users can interact with the scroll bar and customize the user experience based on your application's requirements. The parts are identified by specific literals (e.g., "l" for left/top button, "t" for thumb, "r" for right/bottom button), and you can include additional buttons or background parts as needed. This option allows for a high degree of customization in how the scroll bar functions and can enhance user experience by providing interactive elements that best suit the content and design of your application.

The parts of the control are:

Part	Description
"l"	Left or top button of the scroll bar
"l1"	First additional button in the left or top area
"l2"	Second additional button in the left or top area
"l3"	Third additional button in the left or top area
"l4"	Fourth additional button in the left or top area
"l5"	Fifth additional button in the left or top area
"t"	Scroll bar thumb
"r"	Right or down button of the scroll bar
"r1"	First additional button in the right or down area
"r2"	Second additional button in the right or down area
"r3"	Third additional button in the right or down area
"r4"	Fourth additional button in the right or down area
"r5"	Fifth additional button in the right or down area
"r6"	Sixth additional button in the right or down area
"lo"	Lower background (between left/top button and thumb)
"up"	Upper background (between thumb and right/bottom button)
"b"	Background (union of lower and upper background parts)

Any other literal between commas is ignored. If duplicate literals are found, the second is ignored, and so on.

The enableParts field is mapped to the EnableParts property, which means that the following statements are equivalent:

oScrollBar.Options = {enableParts: "t,l,r"}
oScrollBar.SetOptions({enableParts: "t,l,r"})
oScrollBar.EnableParts = "t,l,r"
oScrollBar.SetEnableParts("t,l,r")

null {null}, uses the default enableParts value. By default, the enableParts is "l,t,r,b", which indicates that only "left-button", "thumb", "right-button" and "background" parts are enabled
"l,t,r" {string}, indicates that only "left-button", "thumb" and "right-button" parts are enabled. In other words, the "background" part is disabled which indicates the no page up or page down is available once the user clicks the upper or lower-background of the scroll

The horizontalOverlayShapes field defines the overlay shapes each part applies, when the scroll-bar's mode is exHorizontal. An overlay shape is displayed over the background and foreground shapes, such as "arrows" of the buttons. The horizontalOverlayShapes field is used to customize the appearance of the overlay elements of each part of the scroll bar when it is displayed in horizontal mode. By defining specific shapes for parts such as the left/top button, thumb, and right/bottom button, you can create a unique and visually appealing scroll bar that fits the design of your application. The shapes can be defined using various formats, including color names, hexadecimal colors, RGB/RGBA/HSL/HSLA color functions, JSON representations of shape objects, or by referencing predefined shapes from the exontrol.Shapes.ScrollBar.overlay object.

The format of the property is:

"shape(part),shape(part),..."

where:

• "shape", defines the shape to apply on the UI part as one of the following:

  ◦ any of 140 color names any browser supports (such as red, blue, green, ...)
  ◦ hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF (such as #0000ff which defines a blue background)
  ◦ hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF (such as #0000ff80 which defines a semi-transparent blue background)
  ◦ RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255( such as rgb(0,0,255) that defines a blue background)
  ◦ RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) ( such as rgba(0,0,255,0.5) which defines a semi-transparent blue background)
  ◦ HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors (such as hsl(240, 100%, 50%) that defines a blue background)
  ◦ HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) (such as hsla(240, 100%, 50%,0.5) that defines a semi-transparent blue background)
  ◦ a JSON representation of the shape object to apply (while it starts with { character, such as '{"normal": {"primitive": "RoundRect","fillColor":"black","tfi": {"fgColor": "white"}}}')
  ◦ specifies the name of the field within the exontrol.Shapes object (while it starts with an uppercase letter, such as Button which refers to exontrol.Shapes.Button shape)
  ◦ defines the name of the property of exontrol.Shapes.ScrollBar.overlay object to be applied on the part, such as "left", "right", "leftLite", "rightLite", etc.

• "part", defines the name of the part the shape is applied on (as defined bellow)

The horizontalOverlayShapes field supports any of the following parts:

Part	Description
"l"	Left or top button of the scroll bar
"l1"	First additional button in the left or top area
"l2"	Second additional button in the left or top area
"l3"	Third additional button in the left or top area
"l4"	Fourth additional button in the left or top area
"l5"	Fifth additional button in the left or top area
"t"	Scroll bar thumb
"r"	Right or down button of the scroll bar
"r1"	First additional button in the right or down area
"r2"	Second additional button in the right or down area
"r3"	Third additional button in the right or down area
"r4"	Fourth additional button in the right or down area
"r5"	Fifth additional button in the right or down area
"r6"	Sixth additional button in the right or down area
"lo"	Lower background (between left/top button and thumb)
"up"	Upper background (between thumb and right/bottom button)
"b"	Background (union of lower and upper background parts)

Currently, the horizontalOverlayShapes field is not mapped to any property of the control.

null {null}, uses the default horizontalOverlayShapes value. By default, the horizontalOverlayShapes is "leftLite(l),rightLite(r)".
"left(l)" {string}, indicates that "l" (left-button) applies the overlay shape defined by exontrol.Shapes.ScrollBar.overlay.left
"left(l),right(r)" {string}, defines arrows for scroll-rectangular or scroll-circle

The horizontalShapes field defines the shapes each part of the control applies, when the scroll-bar's mode is exHorizontal. The horizontalShapes field is used to customize the appearance of each part of the scroll bar when it is displayed in horizontal mode. By defining specific shapes for parts such as the left/top button, thumb, and right/bottom button, you can create a unique and visually appealing scroll bar that fits the design of your application. The shapes can be defined using various formats, including color names, hexadecimal colors, RGB/RGBA/HSL/HSLA color functions, JSON representations of shape objects, or by referencing predefined shapes from the exontrol.Shapes.ScrollBar.background/foreground objects.

The format of the property is:

"shape(part),shape(part),..."

where:

• "shape", defines the shape to apply on the UI part as one of the following:

  ◦ any of 140 color names any browser supports (such as red, blue, green, ...)
  ◦ hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF (such as #0000ff which defines a blue background)
  ◦ hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF (such as #0000ff80 which defines a semi-transparent blue background)
  ◦ RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255( such as rgb(0,0,255) that defines a blue background)
  ◦ RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) ( such as rgba(0,0,255,0.5) which defines a semi-transparent blue background)
  ◦ HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors (such as hsl(240, 100%, 50%) that defines a blue background)
  ◦ HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) (such as hsla(240, 100%, 50%,0.5) that defines a semi-transparent blue background)
  ◦ a JSON representation of the shape object to apply (while it starts with { character, such as '{"normal": {"primitive": "RoundRect","fillColor":"black","tfi": {"fgColor": "white"}}}')
  ◦ defines the name of the property of exontrol.Shapes.ScrollBar.background/exontrol.Shapes.ScrollBar.foreground object to be applied on the part, such as "button", "hThumbLite", "hBackCircle", etc.

• "part", defines the name of the part the shape is applied on (as defined bellow)

The horizontalShapes property supports any of the following parts:

Part	Description
"l"	Left or top button of the scroll bar
"l1"	First additional button in the left or top area
"l2"	Second additional button in the left or top area
"l3"	Third additional button in the left or top area
"l4"	Fourth additional button in the left or top area
"l5"	Fifth additional button in the left or top area
"t"	Scroll bar thumb
"r"	Right or down button of the scroll bar
"r1"	First additional button in the right or down area
"r2"	Second additional button in the right or down area
"r3"	Third additional button in the right or down area
"r4"	Fourth additional button in the right or down area
"r5"	Fifth additional button in the right or down area
"r6"	Sixth additional button in the right or down area
"lo"	Lower background (between left/top button and thumb)
"up"	Upper background (between thumb and right/bottom button)
"b"	Background (union of lower and upper background parts)

The horizontalShapes field is mapped to the HorizontalShapes property, which means that the following statements are equivalent:

oScrollBar.Options = {horizontalShapes: "button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),hThumb(t),back(lo,b,up)"}
oScrollBar.SetOptions({horizontalShapes: "button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),hThumb(t),back(lo,b,up)"})
oScrollBar.HorizontalShapes = "button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),hThumb(t),back(lo,b,up)"
oScrollBar.SetHorizontalShapes("button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),hThumb(t),back(lo,b,up)")

null {null}, uses the default horizontalShapes value. By default, the horizontalShapes is "hThumbLite(t)".
"hThumbLite(t)" {string}, defines a lite-scroll, or shotly it applies the exontrol.Shapes.ScrollBar.background.hThumbLite and exontrol.Shapes.ScrollBar.foreground.hThumbLite on "thumb" part
"button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),hThumb(t),back(lo,b,up)" {string}, defines a rectangular-scroll
"buttonCircle(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),hThumbCircle(t),hBackCircle(b)" {string}, defines a circular-scroll
"button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6)" {string} indicates that all l1-r6 applies the exontrol.Shapes.ScrollBar.background.button and exontrol.Shapes.ScrollBar.foreground.button shapes.

The ignoreLargeChange field specifies whether the large change value is ignored when getting the maximum value. The ignoreLargeChange field is used to control how the maximum value of the scroll bar is calculated in relation to the large change (page size). When set to true, the large change value is ignored, and the maximum value is calculated without considering the page size, allowing for a more precise maximum value based on the content. When set to false, the large change value is included in the calculation of the maximum value, which can be useful for scenarios where you want to ensure that the scroll bar's thumb does not exceed a certain limit when scrolling. This option provides flexibility in how the scroll bar behaves in relation to its content and can help improve user experience by tailoring the scrolling behavior to specific needs.

The ignoreLargeChange field is mapped to the IgnoreLargeChange property, which means that the following statements are equivalent:

oScrollBar.Options = {ignoreLargeChange: true}
oScrollBar.SetOptions({ignoreLargeChange: true})
oScrollBar.IgnoreLargeChange = true
oScrollBar.SetIgnoreLargeChange(true)

null {null}, uses the default ignoreLargeChange value. By default, the ignoreLargeChange is false.
false {boolean}, specifies that the scroll's value goes from min to max
true {boolean}, specifies that the scroll's value goes from min to (max - page)

The largeChange field specifies the amount by which the scroll box position changes when the user clicks the scroll's background or presses the PAGE UP or PAGE DOWN keys. The largeChange field is used to control the larger incremental scrolling behavior of the scroll bar. By defining a specific value for largeChange, you can determine how much the scroll box position changes in response to user interactions such as clicking the scroll's background or pressing the PAGE UP or PAGE DOWN keys. This allows you to provide a more efficient way for users to navigate through larger content areas by enabling them to scroll in larger increments.

The largeChange field is mapped to the LargeChange property, which means that the following statements are equivalent:

oScrollBar.Options = {largeChange: 10}
oScrollBar.SetOptions({largeChange: 10})
oScrollBar.LargeChange = 10
oScrollBar.SetLargeChange(10)

null {null}, uses the default largeChange value. By default, the largeChange is 10.
0 {number}, no change once the user clicks the scroll's background or presses the PAGE UP or PAGE DOWN keys.
10 {number}, increases or decreases the scroll's value  by 10 when the user clicks the scroll's background or presses the PAGE UP or PAGE DOWN keys.

The locked field indicates whether the control is locked(protected) or unlocked. The locked field is used to control the interactivity of the control. When set to true, the control is locked, preventing user interaction such as clicking or dragging any part of the control. When set to false, the control is unlocked, allowing users to interact with it freely. This can be useful in scenarios where you want to temporarily disable user input while maintaining the visibility of the control. While the control is locked, it may still respond to programmatic changes, but user interactions will be restricted until it is unlocked again. The difference between locked and readOnly fields is that while both of them prevent the user from changing the control's value by dragging the thumb, the locked field also prevents the user from clicking or dragging any part of the control, while the readOnly field allows users to interact with the control but not change its value through interaction.

The locked field is mapped to the Locked property, which means that the following statements are equivalent:

oScrollBar.Options = {locked: true}
oScrollBar.SetOptions({locked: true})
oScrollBar.Locked = true
oScrollBar.SetLocked(true)

false {boolean}, unlocks the control
true {boolean}, locks the control (the user can not click or drag any part of the control)

The max field specifies scroll bar's maximum value. The min field specifies scroll bar's minimum value. The max field is used to define the upper bound of the scroll bar's value range. By setting a specific value for max, you can ensure that the scroll box position does not exceed a certain point, which can be useful for controlling the scrolling behavior and preventing users from scrolling past the end of the content. The max value works in conjunction with the min value to establish the valid range for the scroll bar's value, and it is important to ensure that max is greater than min to avoid any issues with scrolling functionality.

The max field is mapped to the Max property, which means that the following statements are equivalent:

oScrollBar.Options = {max: 100}
oScrollBar.SetOptions({max: 100})
oScrollBar.Max = 100
oScrollBar.SetMax(100)

100 {number}, indicates that the scroll's value is always less than 100

The min field specifies scroll bar's minimum value. The max field specifies scroll bar's maximum value. The min field is used to define the lower bound of the scroll bar's value range. By setting a specific value for min, you can ensure that the scroll box position does not go below a certain point, which can be useful for controlling the scrolling behavior and preventing users from scrolling past the beginning of the content. The min value works in conjunction with the max value to establish the valid range for the scroll bar's value, and it is important to ensure that min is less than max to avoid any issues with scrolling functionality.

The min field is mapped to the Min property, which means that the following statements are equivalent:

oScrollBar.Options = {min: 0}
oScrollBar.SetOptions({min: 0})
oScrollBar.Min = 0
oScrollBar.SetMin(0)

0 {number}, indicates that the scroll's value is always greater than 0

The mode field defines the mode the scroll bar displays its parts. The mode field is used to specify the orientation and display mode of the scroll bar. It determines whether the scroll bar is displayed as vertical, horizontal, or automatically based on its dimensions. The available modes include exAuto, which allows the scroll bar to determine its orientation based on its width and height, exVertical for a vertical scroll bar, and exHorizontal for a horizontal scroll bar. This option provides flexibility in how the scroll bar is presented to users, allowing it to adapt to different layouts and design requirements.

The ScrollBar.ModeEnum type supports the following values:

• exAuto (-1), indicates that the size of the scroll bar determines what mode is displayed as: if the scroll bar's width is greater than its height, then a horizontal scroll is displayed, else a vertical scroll bar is shown
• exVertical (0), indicates that the control displays a vertical scroll bar
• exHorizontal (1), indicates that the control displays a horizontal scroll bar

The mode field is mapped to the Mode property, which means that the following statements are equivalent:

oScrollBar.Options = {mode: ScrollBar.ModeEnum.exHorizontal}
oScrollBar.SetOptions({mode: ScrollBar.ModeEnum.exHorizontal})
oScrollBar.Mode = ScrollBar.ModeEnum.exHorizontal
oScrollBar.SetMode(ScrollBar.ModeEnum.exHorizontal)

-1 or ScrollBar.ModeEnum.exAuto {number}, specifies that the scroll bar shows as vertical or horizontal depending on its size
0 or ScrollBar.ModeEnum.exVertical {number}, always displays a vertical scroll bar
1 or ScrollBar.ModeEnum.exHorizontal {number}, always displays a horizontal scroll bar

The orderParts field defines the order of the scroll bar parts, separated by comma. The orderParts field is used to specify the sequence in which the various parts of the scroll bar are displayed. By defining the order of parts such as the left/top button, thumb, and right/bottom button, you can customize the appearance and layout of the scroll bar to better fit your application's design. The parts are identified by specific literals (e.g., "l" for left/top button, "t" for thumb, "r" for right/bottom button), and you can include additional buttons or background parts as needed. This option allows for a high degree of customization in how the scroll bar is structured and can enhance user experience by providing a layout that best suits the content and design of your application.

The parts of the control are:

Part	Description
"l"	Left or top button of the scroll bar
"l1"	First additional button in the left or top area
"l2"	Second additional button in the left or top area
"l3"	Third additional button in the left or top area
"l4"	Fourth additional button in the left or top area
"l5"	Fifth additional button in the left or top area
"t"	Scroll bar thumb
"r"	Right or down button of the scroll bar
"r1"	First additional button in the right or down area
"r2"	Second additional button in the right or down area
"r3"	Third additional button in the right or down area
"r4"	Fourth additional button in the right or down area
"r5"	Fifth additional button in the right or down area
"r6"	Sixth additional button in the right or down area
"lo"	Lower background (between left/top button and thumb)
"up"	Upper background (between thumb and right/bottom button)
"b"	Background (union of lower and upper background parts)

Any other literal between commas is ignored. If duplicate literals are found, the second is ignored, and so on.

The orderParts field is mapped to the OrderParts property, which means that the following statements are equivalent:

oScrollBar.Options = {orderParts: "t,l,r"}
oScrollBar.SetOptions({orderParts: "t,l,r"})
oScrollBar.OrderParts = "t,l,r"
oScrollBar.SetOrderParts("t,l,r")

null {null}, uses the default orderParts value. By default, the orderParts is "l1,l2,l3,l4,l5,l,t,r,r1,r2,r3,r4,r5,r6"
"t,l,r" {string}, indicates that the left/top and right/bottom buttons are displayed right/bottom after the thumb part

The readOnly field indicates whether the control is read-only. The readOnly field is used to control whether the user can change the control's value by dragging the thumb. When set to true, the control is read-only, allowing users to view the current value but preventing them from modifying it through interaction. When set to false, the control is editable, enabling users to change its value by dragging the thumb or using other interactive elements. This can be useful in scenarios where you want to display information without allowing changes, while still keeping the control visible and interactive for other purposes. The difference between locked and readOnly fields is that while both of them prevent the user from changing the control's value by dragging the thumb, the locked field also prevents the user from clicking or dragging any part of the control, while the readOnly field allows users to interact with the control but not change its value through interaction.

The readOnly field is mapped to the ReadOnly property, which means that the following statements are equivalent:

oScrollBar.Options = {readOnly: true}
oScrollBar.SetOptions({readOnly: true})
oScrollBar.ReadOnly = true
oScrollBar.SetReadOnly(true)

false {boolean}, unlocks the control
true {boolean}, the user can't change the control's value by dragging the thumb

The scrollOnThumbRelease field indicates whether the scroll occurs as soon as the user releases the thumb-box. The scrollOnThumbRelease field is used to control the behavior of the scroll bar when the user interacts with the thumb-box. If set to true, the scroll action will only occur when the user releases the thumb-box after dragging it, allowing for more precise control over scrolling. If set to false, the scroll action will occur immediately as the user drags the thumb-box, providing a more responsive scrolling experience.

The scrollOnThumbRelease field is mapped to the ScrollOnThumbRelease property, which means that the following statements are equivalent:

oScrollBar.Options = {scrollOnThumbRelease: true}
oScrollBar.SetOptions({scrollOnThumbRelease: true})
oScrollBar.ScrollOnThumbRelease = true
oScrollBar.SetScrollOnThumbRelease(true)

The smallChange field specifies the amount by which the scroll box position/value changes when the user clicks a scroll arrow or presses an arrow key. The smallChange field is used to control the incremental scrolling behavior of the scroll bar. By defining a specific value for smallChange, you can determine how much the scroll box position changes in response to user interactions such as clicking the scroll arrows or pressing the arrow keys. This allows you to customize the scrolling experience to better suit the content being scrolled and the preferences of your users.

The smallChange field is mapped to the SmallChange property, which means that the following statements are equivalent:

oScrollBar.Options = {smallChange: 5}
oScrollBar.SetOptions({smallChange: 5})
oScrollBar.SmallChange = 5
oScrollBar.SetSmallChange(5)

null {null}, uses the default smallChange value (default: 1).
0 {number}, no change once the user clicks the left/top or right/bottom buttons
1 {number}, increases or decreases the scroll's value  by 1 when the user clicks a scroll arrow or presses an arrow key

The tfi field applies font attributes to captions within the control. The tfi field can be defined using a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}. By default, the tfi field is null, so the canvas uses its own default font defined by exontrol.defGUIFont (typically "12px sans-serif"). CSS fonts applied to surrounding HTML elements do not affect the canvas; the canvas text is independent of page styles, and the default font can be changed by setting exontrol.defGUIFont.

The tfi field as string supports any of the following keywords (each keyword can be specified using first letters only such as "b" for "bold) separated by space characters:

• bold, displays the text in bold (equivalent of <b> tag)
• italic, displays the text in italics (equivalent of <i> tag)
• underline, underlines the text (equivalent of <u> tag)
• strikeout, specifies whether the text is strike-through (equivalent of <s> tag)
• <fontName name>, specifies the font's family (equivalent of <font name> tag)
• <fontSize size>, specifies the size of the font (equivalent of <font ;size> tag)
• <fgColor CSSColor>, specifies the text's foreground color (equivalent of <fgcolor> tag)
• <bgColor CSSColor>, specifies the text's background color (equivalent of <bgcolor> tag)
• <shaColor CSSColor;width;offset>, defines the text's shadow (equivalent of <sha color;width;offset> tag)
• <outColor CSSColor>, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
• <graColor CSSColor;mode;blend>, defines a gradient text (equivalent of <gra color;mode;blend> tag)

Any other word within the tfi field that's not recognized as a keyword is interpreted as:

• name of the font (not a number), specifies the font's family (equivalent of <font name> tag)
• size of the font (number), specifies the size of the font (equivalent of <font ;size> tag)

The tfi field as object supports any of the following fields:

• bold {boolean}, displays the text in bold (equivalent of <b> tag)
• italic {boolean}, displays the text in italics (equivalent of <i> tag)
• underline {boolean}, underlines the text (equivalent of <u> tag)
• strikeout {boolean}, specifies whether the text is strike-through (equivalent of <s> tag)
• fontName {string}, specifies the font's family (equivalent of <font name> tag)
• fontSize {number}, specifies the size of the font (equivalent of <font ;size> tag)
• fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of <fgcolor> tag)
• bgColor {string}, specifies the text's background color (CSScolor) (equivalent of <bgcolor> tag)
• shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of <sha color;width;offset> tag), where:
  • color {string}, defines the color of the text's shadow (CSScolor)
  • width {number}, defines the size of the text's shadow
  • offset {number}, defines the offset to show the text's shadow relative to the text
• outColor {string}, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
• graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of <gra color;mode;blend> tag), where:
  • color {string}, defines the gradient-color (CSScolor)
  • mode {number}, defines the gradient direction as 0 (left-right), 1 (default, top-bottom), 2 (left-center-right), and 3 (top-center-bottom)
  • blend {number}, defines the gradient blend as a value between 0 and 1

CSSColor or CSS legal color values can be specified by the following methods:

• Hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.
• Hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF. For example, #0000ff80 defines a semi-transparent blue.
• RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255. For example, rgb(0,0,255) defines the blue color.
• RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, rgba(0,0,255,0.5) defines a semi-transparent blue.
• HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. For example, hsl(240, 100%, 50%) defines the blue color.
• HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue.
• Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification. For example, blue defines the blue color.

The tfi field is mapped to the Tfi property, which means that the following statements are equivalent:

oScrollBar.Options = {tfi: "b monospace 16 <fg blue>"}
oScrollBar.SetOptions({tfi: "b monospace 16 <fg blue>"})
oScrollBar.Tfi = "b monospace 16 <fg blue>"
oScrollBar.SetTfi("b monospace 16 <fg blue>")

null {null}, the tfi field is ignored
"bold monospace 16 <fg blue>" {string}, defines Monospace font of 16px height, bold and blue
{bold: true, fontName: "monospace", fontSize: 16, fgColor: "blue"} {object}, defines Monospace font of 16px height, bold and blue

The thumbSize field indicates the size to display the scroll bar's thumb. The thumbSize field is used to specify the dimensions of the scroll bar's thumb, which can enhance the user interface by making the thumb larger or smaller based on user preferences or design requirements. By default, the thumbSize is set to -1, which means that the thumb's size will be automatically computed based on the scroll bar's margins (min, max, and page). However, you can customize this value to better fit the overall design of your application or to improve accessibility for users who may have difficulty interacting with smaller thumbs. Setting thumbSize to 0 will hide the thumb entirely, while setting it to a larger value will make it more prominent and easier to drag.

The thumbSize field is mapped to the ThumbSize property, which means that the following statements are equivalent:

oScrollBar.Options = {thumbSize: 18}
oScrollBar.SetOptions({thumbSize: 18})
oScrollBar.ThumbSize = 18
oScrollBar.SetThumbSize(18)

null {null}, uses the default thumbSize value. By default, the thumbSize is -1 (thumb's size automatically is computed based on scroll's margins (min, max and page))
-1 {number}, indicates that the thumb's size automatically is computed based on scroll's margins (min, max and page)
0 {number}, the scroll displays no thumb
128 {number}, defines the scroll's thumb to 128-pixels

The value field specifies scroll bar's value. The value field is used to represent the current position of the scroll box within the scroll bar. By setting a specific value for the scroll bar, you can programmatically control the scroll position and synchronize it with other elements in your application. The value is typically adjusted in response to user interactions such as clicking the scroll arrows, clicking the scroll's background, pressing arrow keys, or rotating the mouse wheel. It is important to note that the value must always be within a certain range defined by the min and max properties, and it may also be influenced by the largeChange field depending on the ignoreLargeChange field. The onchange event is triggered whenever the Value property changes, allowing you to execute custom logic in response to scroll bar movements.

The range of value is:

• between min and max, if the ignoreLargeChange field is true
• between min and max - largeChange, if the ignoreLargeChange field is false

The newly value is always adjusted so it fits its range. For example, if the max is 100, largeChange is 10 and ignoreLargeChange is false, the value can not be greater than 90. If you try to set the value to 95, it will be automatically adjusted to 90. If you try to set the value to -5, it will be automatically adjusted to 0 (if min is 0).

The value field is mapped to the Value property, which means that the following statements are equivalent:

oScrollBar.Options = {value: 25}
oScrollBar.SetOptions({value: 25})
oScrollBar.Value = 25
oScrollBar.SetValue(25)

25 {number}, changes the scroll's value to 25. The "onchange" event occurs, once the scroll's value is changed.

The verticalOverlayShapes field defines the overlay shapes each part applies, when the scroll-bar's mode is exVertical. An overlay shape is displayed over the background and foreground shapes. The verticalOverlayShapes field is used to customize the appearance of the overlay elements of each part of the scroll bar when it is displayed in vertical mode. By defining specific shapes for parts such as the left/top button, thumb, and right/bottom button, you can create a unique and visually appealing scroll bar that fits the design of your application. The shapes can be defined using various formats, including color names, hexadecimal colors, RGB/RGBA/HSL/HSLA color functions, JSON representations of shape objects, or by referencing predefined shapes from the exontrol.Shapes.ScrollBar.overlay object.

The format of the property is:

"shape(part),shape(part),..."

where:

• "shape", defines the shape to apply on the UI part as one of the following:

  ◦ any of 140 color names any browser supports (such as red, blue, green, ...)
  ◦ hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF (such as #0000ff which defines a blue background)
  ◦ hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF (such as #0000ff80 which defines a semi-transparent blue background)
  ◦ RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255( such as rgb(0,0,255) that defines a blue background)
  ◦ RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) ( such as rgba(0,0,255,0.5) which defines a semi-transparent blue background)
  ◦ HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors (such as hsl(240, 100%, 50%) that defines a blue background)
  ◦ HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) (such as hsla(240, 100%, 50%,0.5) that defines a semi-transparent blue background)
  ◦ a JSON representation of the shape object to apply (while it starts with { character, such as '{"normal": {"primitive": "RoundRect","fillColor":"black","tfi": {"fgColor": "white"}}}')
  ◦ specifies the name of the field within the exontrol.Shapes object (while it starts with an uppercase letter, such as Button which refers to exontrol.Shapes.Button shape)
  ◦ defines the name of the property of exontrol.Shapes.ScrollBar.overlay object to be applied on the part, such as "left", "right", "leftLite", "rightLite", etc.

• "part", defines the name of the part the shape is applied on (as defined bellow)

The verticalOverlayShapes field supports any of the following parts:

Part	Description
"l"	Left or top button of the scroll bar
"l1"	First additional button in the left or top area
"l2"	Second additional button in the left or top area
"l3"	Third additional button in the left or top area
"l4"	Fourth additional button in the left or top area
"l5"	Fifth additional button in the left or top area
"t"	Scroll bar thumb
"r"	Right or down button of the scroll bar
"r1"	First additional button in the right or down area
"r2"	Second additional button in the right or down area
"r3"	Third additional button in the right or down area
"r4"	Fourth additional button in the right or down area
"r5"	Fifth additional button in the right or down area
"r6"	Sixth additional button in the right or down area
"lo"	Lower background (between left/top button and thumb)
"up"	Upper background (between thumb and right/bottom button)
"b"	Background (union of lower and upper background parts)

The verticalOverlayShapes field is mapped to the VerticalOverlayShapes property, which means that the following statements are equivalent:

oScrollBar.Options = {verticalOverlayShapes: "up(l),down(r)"}
oScrollBar.SetOptions({verticalOverlayShapes: "up(l),down(r)"})
oScrollBar.VerticalOverlayShapes = "up(l),down(r)"
oScrollBar.SetVerticalOverlayShapes("up(l),down(r)")

null {null}, uses the default verticalOverlayShapes value. By default, the verticalOverlayShapes is "upLite(l),downLite(r)".
"up(l)" {string}, indicates that l applies the overlay shape defined by exontrol.Shapes.ScrollBar.overlay.up
"up(l),down(r)" {string}, defines arrows for scroll-rectangular or scroll-circle

The verticalShapes field defines the shapes each part of the control applies, when the scroll-bar's mode is exVertical. The verticalShapes field is used to customize the appearance of each part of the scroll bar when it is displayed in vertical mode. By defining specific shapes for parts such as the left/top button, thumb, and right/bottom button, you can create a unique and visually appealing scroll bar that fits the design of your application. The shapes can be defined using various formats, including color names, hexadecimal colors, RGB/RGBA/HSL/HSLA color functions, JSON representations of shape objects, or by referencing predefined shapes from the exontrol.Shapes.ScrollBar.background/foreground objects.

The format of the property is:

"shape(part),shape(part),..."

where:

• "shape", defines the shape to apply on the UI part as one of the following:

  ◦ any of 140 color names any browser supports (such as red, blue, green, ...)
  ◦ hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF (such as #0000ff which defines a blue background)
  ◦ hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF (such as #0000ff80 which defines a semi-transparent blue background)
  ◦ RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255( such as rgb(0,0,255) that defines a blue background)
  ◦ RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) ( such as rgba(0,0,255,0.5) which defines a semi-transparent blue background)
  ◦ HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors (such as hsl(240, 100%, 50%) that defines a blue background)
  ◦ HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) (such as hsla(240, 100%, 50%,0.5) that defines a semi-transparent blue background)
  ◦ a JSON representation of the shape object to apply (while it starts with { character, such as '{"normal": {"primitive": "RoundRect","fillColor":"black","tfi": {"fgColor": "white"}}}')
  ◦ defines the name of the property of exontrol.Shapes.ScrollBar.background/exontrol.Shapes.ScrollBar.foreground object to be applied on the part, such as "button", "hThumbLite", "hBackCircle", etc.

• "part", defines the name of the part the shape is applied on (as defined bellow)

The verticalShapes property supports any of the following parts:

Part	Description
"l"	Left or top button of the scroll bar
"l1"	First additional button in the left or top area
"l2"	Second additional button in the left or top area
"l3"	Third additional button in the left or top area
"l4"	Fourth additional button in the left or top area
"l5"	Fifth additional button in the left or top area
"t"	Scroll bar thumb
"r"	Right or down button of the scroll bar
"r1"	First additional button in the right or down area
"r2"	Second additional button in the right or down area
"r3"	Third additional button in the right or down area
"r4"	Fourth additional button in the right or down area
"r5"	Fifth additional button in the right or down area
"r6"	Sixth additional button in the right or down area
"lo"	Lower background (between left/top button and thumb)
"up"	Upper background (between thumb and right/bottom button)
"b"	Background (union of lower and upper background parts)

The verticalShapes field is mapped to the VerticalShapes property, which means that the following statements are equivalent:

oScrollBar.Options = {verticalShapes: "button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),vThumb(t),back(lo,b,up)"}
oScrollBar.SetOptions({verticalShapes: "button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),vThumb(t),back(lo,b,up)"})
oScrollBar.VerticalShapes = "button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),vThumb(t),back(lo,b,up)"
oScrollBar.SetVerticalShapes("button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),vThumb(t),back(lo,b,up)")

null {null}, uses the default verticalShapes value. By default, the verticalShapes is "vThumbLite(t)".
"vThumbLite(t)" {string}, defines a lite-scroll, or shotly it applies the exontrol.Shapes.ScrollBar.background.vThumbLite and exontrol.Shapes.ScrollBar.foreground.vThumbLite on "thumb" part
"button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),vThumb(t),back(lo,b,up)" {string}, defines a rectangular-scroll
"buttonCircle(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),vThumbCircle(t),vBackCircle(b)" {string}, defines a circular-scroll
"button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6)" {string} indicates that all l1-r6 applies the exontrol.Shapes.ScrollBar.background.button and exontrol.Shapes.ScrollBar.foreground.button shapes.

The visibleParts field defines the visible parts of the scroll bar, separated by comma. The visibleParts field is used to specify which parts of the scroll bar are visible to users. By defining the visible parts, you can customize the appearance of the scroll bar to better fit your application's design and user experience requirements. The parts are identified by specific literals (e.g., "l" for left/top button, "t" for thumb, "r" for right/bottom button), and you can include additional buttons or background parts as needed. This option allows for a high degree of customization in how the scroll bar is presented and can enhance user experience by providing a layout that best suits the content and design of your application.

The parts of the control are:

Part	Description
"l"	Left or top button of the scroll bar
"l1"	First additional button in the left or top area
"l2"	Second additional button in the left or top area
"l3"	Third additional button in the left or top area
"l4"	Fourth additional button in the left or top area
"l5"	Fifth additional button in the left or top area
"t"	Scroll bar thumb
"r"	Right or down button of the scroll bar
"r1"	First additional button in the right or down area
"r2"	Second additional button in the right or down area
"r3"	Third additional button in the right or down area
"r4"	Fourth additional button in the right or down area
"r5"	Fifth additional button in the right or down area
"r6"	Sixth additional button in the right or down area
"lo"	Lower background (between left/top button and thumb)
"up"	Upper background (between thumb and right/bottom button)
"b"	Background (union of lower and upper background parts)

Any other literal between commas is ignored. If duplicate literals are found, the second is ignored, and so on.

The visibleParts field is mapped to the VisibleParts property, which means that the following statements are equivalent:

oScrollBar.Options = {visibleParts: "t,l,r"}
oScrollBar.SetOptions({visibleParts: "t,l,r"})
oScrollBar.VisibleParts = "t,l,r"
oScrollBar.SetVisibleParts("t,l,r")

null {null}, uses the default visibleParts value. By default, the visibleParts is "l,t,r,b", which indicates that only "left-button", "thumb", "right-button" and "background" parts are visible
"t,b" {string}, indicates that only "thumb", "background" parts are visible

The wheelChange field specifies the amount by which the scroll box position changes when the user rotates the mouse wheel. The wheelChange field is used to control the scrolling behavior of the scroll bar in response to mouse wheel interactions. By defining a specific value for wheelChange, you can determine how much the scroll box position changes when the user rotates the mouse wheel. This allows you to provide a more intuitive and responsive scrolling experience for users who prefer using the mouse wheel for navigation.

The wheelChange field is mapped to the WheelChange property, which means that the following statements are equivalent:

oScrollBar.Options = {wheelChange: 3}
oScrollBar.SetOptions({wheelChange: 3})
oScrollBar.WheelChange = 3
oScrollBar.SetWheelChange(3)

null {null}, uses the default wheelChange value. By default, the wheelChange is 1.
0 {number}, no change while the user rotates the mouse wheel.
1 {number}, increases or decreases the scroll's value by 1 when the user rotates the mouse wheel