ScrollBar class

The ActionEnum type defines the actions the ScrollBar.Scroll method can perform. The ScrollBar.Scroll method performs a scroll action on the control, based on the specified action and value. The action parameter of the Scroll method accepts values from the ScrollBar.ActionEnum type, which represents different scrolling actions such as line up/down, page up/down, thumb position, and more. Each action corresponds to a specific scrolling behavior that can be triggered programmatically or through user interaction. The value parameter of the Scroll method indicates the amount or position to scroll, depending on the action being performed.

Each ActionEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A case-insensitive partial string containing the name that matches the enumeration constant.

For instance, the string "pagedown" is equivalent to the numeric value 3, or to the enumeration constant exPageDown.

The ScrollBar.DisableNoScrollEnum type specifies whether the scroll bar is visible or hidden if no scroll is possible. This type is used by the DisableNoScroll property, which determines the behavior of the scroll bar when there is no content to scroll. The options include hiding the scroll bar, disabling its buttons, or keeping it visible even when scrolling is not possible. This allows for a more user-friendly interface by providing visual cues about the scrollability of the content.

Each DisableNoScrollEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A case-insensitive partial string containing the name that matches the enumeration constant.

For instance, the string "disable" is equivalent to the numeric value 1, or to the enumeration constant exDisableNoScroll.

The ScrollBar.ModeEnum type defines the mode the control displays its parts. The Mode property accepts values from the ScrollBar.ModeEnum type, which represents different display modes for the scroll bar. The available modes include exAuto, exVertical, and exHorizontal. The exAuto mode allows the scroll bar to automatically determine its orientation based on its dimensions, while the exVertical and exHorizontal modes explicitly set the scroll bar to display as vertical or horizontal, respectively.

Each ModeEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A case-insensitive partial string containing the name that matches the enumeration constant.

For instance, the string "horizontal" is equivalent to the numeric value 1, or to the enumeration constant exHorizontal.

The ScrollBar.PartEnum type defines the parts of a scroll bar control. The GetVisiblePart(), GetEnablePart(), GetCaptionPart() and GetCursor() methods accept a part parameter that indicates the part of the scroll bar to retrieve information about, or to set its properties. The SetVisiblePart(), SetEnablePart(), SetCaptionPart() and SetCursor() methods accept a part parameter that indicates the part of the scroll bar to set its properties. The parts of the scroll bar include buttons, thumb, background, and more, each identified by a specific enumeration constant in the ScrollBar.PartEnum type.

Each PartEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A combination of one or more compatible enumeration constants, separated by the | operator.
• A case-insensitive partial string containing one or more comma-separated names that match the enumeration constants.

For instance, the string "thumb,upper,lower" is equivalent to the numeric value 896, or to the combination of enumeration constants exThumbPart | exUpperBackPart | exLowerBackPart.

The type field holds the full name of the object, since constructor.name can differ in minimized or obfuscated code. This field is never altered by the control itself, so it can be reliably used to verify the object's type. It is particularly useful when multiple versions of a control exist or when you need to check the type without depending on constructor.name, which may be inconsistent in some scenarios, such as minified code. The ScrollBar.type member always returns "ScrollBar"

console.log(exontrol.ScrollBar.type); // logs "ScrollBar"

The version field defines the version of the control. Each release of the control has a different version number, so you can use this field to check the control's version and ensure that it supports the features you want to use. The version field is especially useful when you have multiple versions of the control, or when you want to check the version of the control without relying on other properties or methods that may differ between versions. The current version is 5.2

console.log(exontrol.ScrollBar.version); // displays the version of the control, for instance "5.2"

The AdjustThumbPos property specifies whether the thumb's position is automatically shown on the exactly scroll bar's value, while user drags the control's thumb. If the AdjustThumbPos property is set to true, the thumb's position is automatically adjusted at exactly scroll's value, while user drags it. If the AdjustThumbPos property is set to false, 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.

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 property defines whether the control changes its value/position on keys. The AllowKeys property 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.

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 property specifies whether the control scrolls directly to the value from the cursor, while user right-clicks the control. The AllowScrollDirect property 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)

null {null}, indicates that AllowScrollDirect property defines the AllowScrollDirect property. 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 property gets or sets the size to display the scroll bar's buttons. The ButtonSize property 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.

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 property specifies the mouse cursors assigned to the different parts of the control. The Cursors property 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)

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 property specifies whether the scroll bar's parts are enabled/shown or disabled/hidden, when no scroll is possible. The DisableNoScroll property is used to control the behavior of the scroll bar when there is no content to scroll. When set to exHideNoScroll, the scroll bar will be hidden if no scrolling is possible, which can help declutter the user interface. When set to exDisableNoScroll, the scroll bar's buttons will be disabled, providing a visual indication that scrolling is not available without hiding the scroll bar entirely. When set to exShowNoScroll, the scroll bar remains visible even when no scrolling is possible, which can be useful for maintaining a consistent layout or for providing users with a clear indication of where the scroll bar is located, regardless of its functionality at any given moment.

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

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 property defines the enabled parts of the scroll bar, separated by comma. The EnableParts property is used to specify which parts of the scroll bar are enabled for user interaction. By defining the enabled parts, you can control which components of the scroll bar users can interact with, allowing for a more tailored user experience. 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.

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 property defines the shape for parts of the scroll bar (overlay and control's mode is horizontal). An overlay shape is displayed over the background and foreground shapes, such as "arrows" of the buttons. The HorizontalOverlayShapes property 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.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 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)

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 property defines the shapes each part of the control applies, when the scroll-bar's mode is exHorizontal. The HorizontalShapes property 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)

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 property specifies whether the large change value is ignored when getting the maximum value. The IgnoreLargeChange property 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.

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 property 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 property is used to define the amount by which the scroll bar's value changes when the user clicks in the scroll bar (outside of the thumb) or presses the PAGE UP or PAGE DOWN keys on the keyboard. This property allows you to control how much the scroll bar's value changes in response to these specific user interactions, providing a way to customize the scrolling behavior for larger increments. For example, setting LargeChange to 10 will increase or decrease the scroll bar's value by 10 when the user clicks in the scroll bar or presses the PAGE UP or PAGE DOWN keys, allowing for quicker navigation through content.

null {null}, uses the default LargeChange property. 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 Listeners field defines the events of the control, as an object of exontrol.Lts type. The exontrol.Lts type supports forEach(callback, thisArg) method that helps you to enumerate the events the control supports. The on() method adds an event listener to the specified event or defines a keyboard shortcut. The on() method enables you to listen for events and execute custom code when those events occur, or to define keyboard shortcuts that trigger specific actions within the component. You can use the on() method to enhance the interactivity and functionality of your application by responding to user actions or keyboard inputs. Use the off() method to remove previously bound event handlers or keyboard shortcuts. The Events section lists the events the component supports.

The following sample shows how you can get all events the component currently supports:

oScrollBar.Listeners.forEach(function(name)
{
 console.log(name);
});

The following sample displays scroll-bar's value as soon as it changes:

oScrollBar.Listeners.Add("onchange", function (oEvent)
{
 console.log(oEvent);
});

where oScrollBar is an object of ScrollBar type

The Locked property indicates whether the control is locked(protected) or unlocked. When the control is locked, the user cannot click or drag any part of the control, but the application can still change its value and page by setting the Value property. The difference between Locked and ReadOnly properties 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.

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

The Max property specifies scroll bar's maximum value. The maximum value represents the highest possible value that the scroll bar can have. By setting the Max property, you can define the endpoint of the scroll bar's range, which is crucial for ensuring that the scroll bar behaves as expected in relation to the content it is associated with. The maximum value must always be greater than or equal to the minimum value defined by the Min property, and it can also affect how the scroll bar's thumb size is calculated if the ThumbSize property is set to -1 (automatic). Adjusting the maximum value allows you to control the scroll bar's behavior and ensure that it fits well within the context of your application.

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

The Min property specifies scroll bar's minimum value. The minimum value represents the lowest possible value that the scroll bar can have. By setting the Min property, you can define the starting point of the scroll bar's range, which is essential for ensuring that the scroll bar behaves as expected in relation to the content it is associated with. The minimum value must always be less than or equal to the maximum value defined by the Max property, and it can also affect how the scroll bar's thumb size is calculated if the ThumbSize property is set to -1 (automatic). Adjusting the minimum value allows you to control the scroll bar's behavior and ensure that it fits well within the context of your application.

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

The Mode property defines the mode the scroll bar displays its parts. The Mode property 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

-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 Options property defines the options to display the control, as an object of ScrollBar.Options type. This object represents a collection of configurable settings that control the behavior and appearance of the control. Options can be assigned either by setting the Options property directly or by calling SetOptions(), which allows you to update one or more settings programmatically at runtime. When applying changes, only the options specified in the provided object are updated; any options not included remain unchanged.

{visibleParts: "t,b"} {object}, which indicates that only the thumb and background parts are visible

The OrderParts property defines the order of the scroll bar parts, separated by comma. The OrderParts property 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.

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 Pos property specifies the scroll bar's position as a zero-based offset from the Min property. The actual scroll value is calculated as:

Value = Min + Pos

The position ranges from 0 to (Max − Min). If the IgnoreLargeChange property is false, the maximum position becomes (Max − Min − LargeChange), ensuring the visible page does not exceed the defined range. This property provides a convenient way to work with the scroll bar's position in a more intuitive manner, especially when you want to manage the scroll bar's state based on its position rather than its absolute value. The "onchange" event occurs, once the scroll's position is changed.

25 {number}, changes the scroll's position to 25

The ReadOnly property indicates whether the control is read-only. When the control is read-only, the user can interact with the control but cannot change its value by dragging the thumb, while the application can still change its value and page by setting the Value property. The difference between Locked and ReadOnly properties 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.

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

The ScrollOnThumbRelease property indicates whether the scroll occurs as soon as user releases the thumb-box. The ScrollOnThumbRelease property 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.

false {boolean}, the scroll action will occur immediately as the user drags the thumb-box, providing a more responsive scrolling experience.
true {boolean}, the scroll action will only occur when the user releases the thumb-box after dragging it, allowing for more precise control over scrolling.

The SmallChange property 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 property is used to define the incremental change in the scroll bar's value when the user interacts with the scroll arrows or uses the arrow keys on the keyboard. By setting this property, you can control how much the scroll bar's value changes in response to these user actions, allowing for a more customized and responsive scrolling experience. For example, setting SmallChange to 1 will increase or decrease the scroll bar's value by 1 when the user clicks a scroll arrow or presses an arrow key, while setting it to a larger value will result in a more significant change in the scroll bar's position with each interaction.

null {null}, uses the default SmallChange property. By default, the smallChange is 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 property defines the font attributes that are applied to the control's captions and can be set to customize their appearance. The Tfi property can be set by a string such as "b monospace 16" or by an object such as {bold: true, fontName: "monospace", fontSize: 16}, and immediately applies these settings to update the displayed captions. By default, the Tfi property 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 property 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 property 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 property 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.

null {null}, the Tfi property 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 property defines the size to display the scroll bar's thumb. The ThumbSize property is used to specify the dimensions of the scroll bar's thumb, which is the draggable element that allows users to scroll through content. By default, the ThumbSize is set to -1, which means that the size of the thumb is automatically computed based on the scroll bar's margins (min, max, and page). However, you can customize this value to set a specific size for the thumb. Setting thumbSize to 0 will hide the thumb entirely, while setting it to a larger value will make it more prominent and easier to interact with. Adjusting the thumb size can enhance the user experience by making it easier for users to click and drag the thumb, especially in cases where precision is required or when dealing with smaller scroll bars.

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 property specifies the scroll bar's value. The Value property represents the current position of the scroll box within the scroll bar. By assigning a specific value to the scroll bar, you can programmatically control its position and keep it synchronized with other elements in your application. The Value property typically changes in response to user actions such as clicking the scroll arrows, clicking the scroll bar's background, pressing the arrow keys, or rotating the mouse wheel. The assigned value must always remain within the range defined by the Min and Max properties, and it can also be affected by the LargeChange property, depending on the IgnoreLargeChange property setting. 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 property is true
• between min and max - largeChange, if the IgnoreLargeChange property 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).

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

The VerticalOverlayShapes property 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 property 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 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)

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 property defines the shapes each part of the control applies, when the scroll-bar's mode is exVertical. The VerticalShapes property 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)

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 property defines the visible parts of the scroll bar, separated by comma. The VisibleParts property 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.

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 property specifies the amount by which the scroll box position changes when the user rotates the mouse wheel. The WheelChange property 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.

null {null}, uses the default WheelChange property. 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

The BeginUpdate() method suspends the control's render until the EndUpdate() method is called. It maintains performance, while multiple changes occurs within the control. The BeginUpdate() method is mostly used when you want to perform multiple changes to the control without refreshing the control after each change, and once all changes are performed, you can call the EndUpdate() method to refresh the control. You can use the Update() method to perform multiple changes at once. The BeginUpdate/EndUpdate() methods are not required to be called when you use the Update() method, because the methods already maintain performance while performing multiple changes to the control.

oScrollBar.BeginUpdate();
  // performs multiple changes to the control
oScrollBar.EndUpdate();

The EndUpdate() method resumes the control's render, after it is suspended by the BeginUpdate() method. The EndUpdate() method is mostly used after calling the BeginUpdate() method, to refresh the control after performing multiple changes to the control. You can use the Update() method to perform multiple changes at once. The BeginUpdate/EndUpdate() methods are not required to be called when you use the Update() method, because the methods already maintain performance while performing multiple changes to the control.

oScrollBar.BeginUpdate();
 // performs multiple changes to the control
oScrollBar.EndUpdate();

The GetCanvas() method gets the canvas element, the control is running on. The canvas element is the HTMLCanvasElement object that hosts the control. The control uses the canvas's context to draw itself and handle user interactions. The GetCanvas() method returns a reference to this canvas element, allowing you to access its properties and methods for further customization or integration with other components.

oScrollBar.GetCanvas(), gets the canvas element, the control is running on, and holds a reference to it into oCanvas variable

The GetCaptionPart() method gets the part's caption. This method is used to assign custom captions to specific parts of the scroll bar, allowing for enhanced user interaction and a more personalized user interface. By using the GetCaptionPart() method, you can retrieve the caption assigned to a particular part of the scroll bar, which can be useful for providing additional context or instructions to users. This feature enables developers to create a more intuitive and user-friendly experience by labeling parts of the scroll bar in a way that is meaningful to the application's functionality. Changing the caption of a part requires a call to the Refresh() method to update the scroll bar's appearance and reflect the new caption. For example, if you set a caption for the thumb part of the scroll bar using SetCaptionPart("thumb", "Scroll"), you should call Refresh() afterward to visually display the new caption on the thumb part of the scroll bar.

oScrollBar.GetCaptionPart("thumb") {string}, gets the caption of the thumb part of the scroll bar

The GetInfo() method returns the scroll bar's range, page and position as an object of {range,page,pos} type. The range field indicates a positive value equivalent with a range as [0 ... (max - min)]. The page field specifies the page size for a proportional scroll bar, equivalent with the large change. The pos field specifies the scroll bar's position. The scroll bar's value is min + pos. The "onchange" event occurs, once the scroll's position is changed.

oScrollBar.GetInfo(), returns an object of {range,page,pos} type that inicates the scroll bar's range, page and position. For example, if the scroll's min is 0, max is 100, page is 10 and value is 25, the returned object will be: {range:100, page:10, pos:25}

The GetMaxRange() method indicates the range the value can navigate to. The range is calculated as the difference between the maximum and minimum values of the scroll bar, which represents the total number of discrete positions that the scroll bar can occupy. If the IgnoreLargeChange property is false and the LargeChange property is greater than 0, the maximum range is reduced by the value of LargeChange to ensure that the visible page does not exceed the defined range. This method provides a convenient way to determine how far the scroll bar can navigate based on its current configuration, allowing developers to manage the scroll bar's behavior and ensure that it fits well within the context of their application.

oScrollBar.GetMaxRange() {number}, gets the range the value can navigate to. For example, if the scroll's min is 0, max is 100 and largeChange is 10, the GetMaxRange() method will return 90, which indicates that the scroll bar's position can range from 0 to 90 (0-based), corresponding to actual values from 0 to 100, ensuring that the visible page does not exceed the defined range.

The GetPage() method specifies the amount by which the scroll box position changes when the user clicks in the scroll bar or presses the PAGE UP or PAGE DOWN keys ( equivalent of LargeChange property ). The LargeChange property is used to define the amount by which the scroll bar's value changes when the user clicks in the scroll bar (outside of the thumb) or presses the PAGE UP or PAGE DOWN keys on the keyboard. This property allows you to control how much the scroll bar's value changes in response to these specific user interactions, providing a way to customize the scrolling behavior for larger increments. For example, setting LargeChange to 10 will increase or decrease the scroll bar's value by 10 when the user clicks in the scroll bar or presses the PAGE UP or PAGE DOWN keys, allowing for quicker navigation through content.

The following statements are equivalent:

 oScrollBar.GetPage() {number}, returns the amount by which the scroll box position changes when the user clicks in the scroll bar or presses the PAGE UP or PAGE DOWN keys
 oScrollBar.GetLargeChange() {number}, returns the amount by which the scroll box position changes when the user clicks in the scroll bar or presses the PAGE UP or PAGE DOWN keys
 oScrollBar.LargeChange {number}, specifies the amount by which the scroll box position changes when the user clicks in the scroll bar or presses the PAGE UP or PAGE DOWN keys

where oScrollBar is an instance of the ScrollBar control

The GetRange() method returns the range of the scroll bar's position (0-based). The range is calculated as the difference between the maximum and minimum values of the scroll bar, which represents the total number of discrete positions that the scroll bar can occupy. This method provides a convenient way to determine how many steps or increments are available for scrolling, allowing developers to manage the scroll bar's behavior and ensure that it fits well within the context of their application.

If the scroll's min is 0 and max is 100, the GetRange() method will return 100, which indicates that the scroll bar's position can range from 0 to 100 (0-based). If the scroll's min is 10 and max is 50, the GetRange() method will return 40, which indicates that the scroll bar's position can range from 0 to 40 (0-based), corresponding to actual values from 10 to 50.

The GetScrollRange() method returns the maximum position the scroll bar can go to (0-based). The range is calculated as the difference between the maximum and minimum values of the scroll bar, which represents the total number of discrete positions that the scroll bar can occupy. If the IgnoreLargeChange property is false and the LargeChange property is greater than 0, the maximum range is reduced by the value of LargeChange to ensure that the visible page does not exceed the defined range. This method provides a convenient way to determine how far the scroll bar can navigate based on its current configuration, allowing developers to manage the scroll bar's behavior and ensure that it fits well within the context of their application.

oScrollBar.GetScrollRange() {number}, gets the maximum position the scroll bar can go to (0-based). For example, if the scroll's min is 10 and max is 50, the GetScrollRange() method will return 40, which indicates that the scroll bar's position can range from 0 to 40 (0-based), corresponding to actual values from 10 to 50. If the IgnoreLargeChange property is false and the LargeChange property is greater than 0, the GetScrollRange() method will return a reduced value to ensure that the visible page does not exceed the defined range. For instance, if the scroll's min is 10, max is 50, largeChange is 10 and ignoreLargeChange is false, the GetScrollRange() method will return 30, which indicates that the scroll bar's position can range from 0 to 30 (0-based), corresponding to actual values from 10 to 50, ensuring that the visible page does not exceed the defined range.

The Refresh() method forces the control to redraw and update its layout without modifying any of its properties or data. It is typically used when the visual appearance needs to be recalculated or repainted, even though no structural or state changes were made.

For example, call Refresh() when:

• The control's container has been resized and the layout must be recalculated.
• External CSS or styling changes affect the control's appearance.
• The control becomes visible after being hidden.
• You need to ensure the UI is visually synchronized with its current internal state.

The method does not alter the control's data, options, or configuration - it only updates the rendered output.

oScrollBar.Refresh(), refreshes the control

The ResetRange() method resets the scroll bar's range. The range is calculated as the difference between the maximum and minimum values of the scroll bar, which represents the total number of discrete positions that the scroll bar can occupy. By using the ResetRange() method, you can quickly reset the scroll bar's range to a default state, which can be useful in scenarios where you want to clear any custom range settings and return to a standard configuration. The Min and Max properties define the range of the scroll bar, and the ResetRange() method provides a convenient way to reset this range based on a default number of discrete positions for the scroll bar. For example, calling ResetRange() will set the maximum value of the scroll bar to be equal to the minimum value, effectively resetting the range to 0.

If the scroll's min is 0 and max is 100, calling oScrollBar.ResetRange() will change the scroll's max to 0 (min + range), while the min remains unchanged. The GetRange() method will then return 0, which indicates that the scroll bar's position can only be at 0 (0-based). If the scroll's min is 10 and max is 50, calling oScrollBar.ResetRange() will change the scroll's max to 10 (min + range), while the min remains unchanged. The GetRange() method will then return 0, which indicates that the scroll bar's position can only be at 0 (0-based), corresponding to an actual value of 10.

The Scroll() method scrolls the control programmatically. It performs smooth scrolling for actions such as Page Up, Page Down, Home, End, or exThumbPos. The smooth effect also occurs when the user right-clicks the scroll bar or triggers a home/end/page up/down command. For Line Up, Line Down, Line Left, or Line Right actions, the Scroll() method does not apply smooth scrolling, as these operations are intended for small, incremental changes and must respond immediately.

Scroll(exScrollEnd), scrolls to the end
 Scroll(exLineDown, 2), scrolls down two lines
 Scroll(exThumbPos, 100), scrolls to the position 100

The SetCaptionPart() method changes part's caption. This method is used to assign custom captions to specific parts of the scroll bar, allowing for enhanced user interaction and a more personalized user interface. By using the SetCaptionPart() method, you can set or change the caption assigned to a particular part of the scroll bar, which can be useful for providing additional context or instructions to users. This feature enables developers to create a more intuitive and user-friendly experience by labeling parts of the scroll bar in a way that is meaningful to the application's functionality. Changing the caption of a part requires a call to the Refresh() method to update the scroll bar's appearance and reflect the new caption. For example, if you set a caption for the thumb part of the scroll bar using SetCaptionPart("thumb", "Scroll"), you should call Refresh() afterward to visually display the new caption on the thumb part of the scroll bar.

oScrollBar.SetCaptionPart("thumb", "R"), assigns "T" caption to the thumb part of the scroll bar

The SetInfo() method changes the scroll bar's range, page and position. The oInfo parameter is an object of {range,page,pos} type. The range field indicates a positive value equivalent with a range as [0 ... (max - min)]. The page field specifies the page size for a proportional scroll bar, equivalent with the large change. The pos field specifies the scroll bar's position. The scroll bar's value is min + pos. The "onchange" event occurs, once the scroll's position is changed.

oScrollBar.SetInfo({range:100, page:10, pos:25}), changes the scroll bar's range to 100, page to 10 and position to 25. The scroll bar's value will be changed to 25 (min + pos). The "onchange" event occurs, once the scroll's position is changed.
oScrollBar.SetInfo({page:10}), changes the scroll bar's page to 10, while the range and position remain unchanged.

The SetPage() method specifies the amount by which the scroll box position changes when the user clicks in the scroll bar or presses the PAGE UP or PAGE DOWN keys ( equivalent of LargeChange property ). The LargeChange property is used to define the amount by which the scroll bar's value changes when the user clicks in the scroll bar (outside of the thumb) or presses the PAGE UP or PAGE DOWN keys on the keyboard. This property allows you to control how much the scroll bar's value changes in response to these specific user interactions, providing a way to customize the scrolling behavior for larger increments. For example, setting LargeChange to 10 will increase or decrease the scroll bar's value by 10 when the user clicks in the scroll bar or presses the PAGE UP or PAGE DOWN keys, allowing for quicker navigation through content.

The following statements are equivalent:

 oScrollBar.SetPage( 10 ), changes the scroll's page to 10. The "onchange" event occurs, once the scroll's value is changed by changing the page
 oScrollBar.SetLargeChange(10), changes the scroll's page to 10. The "onchange" event occurs, once the scroll's value is changed by changing the page
 oScrollBar.LargeChange = 10, changes the scroll's page to 10. The "onchange" event occurs, once the scroll's value is changed by changing the page
 
where oScrollBar is an instance of the ScrollBar control

The SetRange() method changes the range of the scroll bar's position (0-based). The range is calculated as the difference between the maximum and minimum values of the scroll bar, which represents the total number of discrete positions that the scroll bar can occupy. By using the SetRange() method, you can adjust the scroll bar's range to fit the specific needs of your application, allowing for a more customized and responsive scrolling experience. The Min and Max properties define the range of the scroll bar, and the SetRange() method provides a convenient way to adjust this range based on a desired number of discrete positions for the scroll bar. For example, if you want to set the scroll bar's range to 100, you can call SetRange(100), which will adjust the maximum value of the scroll bar accordingly while keeping the minimum value unchanged.

If the scroll's min is 0 and max is 100, calling oScrollBar.SetRange(200) will change the scroll's max to 200, while the min remains unchanged. The GetRange() method will then return 200, which indicates that the scroll bar's position can range from 0 to 200 (0-based). If the scroll's min is 10 and max is 50, calling oScrollBar.SetRange(40) will change the scroll's max to 50 (min + range), while the min remains unchanged. The GetRange() method will then return 40, which indicates that the scroll bar's position can range from 0 to 40 (0-based), corresponding to actual values from 10 to 50.

The Update() method locks the control's paint during the callback, and invalidates the control once the method ends. The BeginUpdate/EndUpdate() methods are not required to be called when you use the Update() or Smooth() methods, because the methods already maintain performance while performing multiple changes to the control. The BeginUpdate/EndUpdate() methods are not required to be called when you use the Update() or Smooth() methods, because the methods already maintain performance while performing multiple changes to the control.

oScrollBar.Update(function()
{
 // performs multiple changes to the control
});

The off() method removes a previously bound handler from a specified event, allowing you to stop listening for that event and prevent the associated actions from being executed. Also removes keyboard shortcuts previously defined using the on() method. The event name is case-insensitive and may or may not include the 'on' prefix. For example, 'click' is equivalent to 'onclick' and vice versa. If the event parameter is missing/empty/undefined, all event handlers are removed from the control. If the listener parameter is missing/empty/undefined, all handlers of the specified event are removed. If the method parameter is missing/empty/undefined, the listener[type]() function is used to compare and remove the handler(s).

The following example removes the change event handler from the control:

oScrollBar.off("change");

where oScrollBar is an object of ScrollBar type.

This sample is equivalent to:

oScrollBar.Listeners.Remove("onchange");

The following example removes all event handlers from the control:

oScrollBar.off();

where oScrollBar is an object of ScrollBar type.

This sample is equivalent to:

oScrollBar.Listeners.Clear();

or

oScrollBar.Listeners.Remove();

The on() method adds an event listener to the specified event or defines a keyboard shortcut. The on() method enables you to listen for events and execute custom code when those events occur, or to define keyboard shortcuts that trigger specific actions within the component. You can use the on() method to enhance the interactivity and functionality of your application by responding to user actions or keyboard inputs. Use the off() method to remove previously bound event handlers or keyboard shortcuts.

The following example logs event details when the control is changed:

oScrollBar.on("change", function(oEvent)
{
  console.log(oEvent);
});

where oScrollBar is an object of ScrollBar type.

This sample is quivalent of 

oScrollBar.Listeners.Add("onchange", function (oEvent)
{
  console.log(oEvent);
});

The onchange event notifies your application that the scroll bar's value has been changed. The event handler receives an event object of {number} type that indicates the current scroll bar's value, equivalent to calling the Value property. The Min property indicates the minimum value of the scroll bar's range, and the Max property indicates the maximum value of the scroll bar's range. When the scroll bar's value is changed by user interaction such as dragging the thumb or clicking on the scroll bar, or by application through setting the Value property, the onchange event is triggered to notify your application about this change. The onchanging event notifies your application that the scroll bar's value is about to change, providing both the current value and the upcoming new value.

The following samples display the control's current position, as soon as it changes:

oScrollBar.onchange = function (oEvent)
{
 console.log(oEvent);
}

or

oScrollBar.Listeners.Add("onchange", function (oEvent)
{
 console.log(oEvent);
})

where oScrollBar is an object of ScrollBar type

The onchanging event notifies your application that the scroll bar's value is about to change, providing both the current value and the upcoming new value. The event handler receives an event object of type {old, new}, where the old field indicates the scroll bar's current value and the new field indicates the proposed new value. This event is triggered whenever the scroll bar's value is about to change, either through user interaction (such as dragging the thumb or clicking on the scroll bar) or programmatically by setting the Value property. Your application can prevent the change by assigning the old value back to the new field in the event object. After the scroll bar's value has actually changed, the onchange event is triggered to notify your application of the completed change.

The following samples display the old and new value of the control, as soon as it changes:

oScrollBar.onchanging = function (oEvent)
{
 console.log(oEvent);
}

or

oScrollBar.Listeners.Add("onchanging", function (oEvent)
{
 console.log(oEvent);
})

where oScrollBar is an object of ScrollBar type

The onclickingpart event is triggered repeatedly while the user holds down the click on a part of the control. It continues firing until the user releases the click, allowing your application to perform continuous actions during the click. This event notifies your application that a part of the control is being clicked. For instance, you can use this event to perform continuous scrolling while the user holds down the click on the scroll bar's button, while the onclickpart event can be used to perform an action after the user clicks or releases the button.

The following samples display the part of the scroll bar being cliked:

oScrollBar.onclickingpart = function (oEvent)
{
 console.log(oEvent);
}

or

oScrollBar.Listeners.Add("onclickingpart", function (oEvent)
{
 console.log(oEvent);
})

where oScrollBar is an object of ScrollBar type

The onclickpart event notifies your application that the user clicks a part of the control. This event is triggered once the user releases the click on a part of the control, allowing your application to perform actions after the click. This event notifies your application that a part of the control has been clicked. For instance, you can use this event to perform an action after the user clicks the scroll bar's button or releases the thumb, while the onclickingpart event can be used to perform continuous actions during the click.

The following samples display the part of the scroll bar being cliked:

oScrollBar.onclickpart = function (oEvent)
{
 console.log(oEvent);
}

or

oScrollBar.Listeners.Add("onclickpart", function (oEvent)
{
 console.log(oEvent);
})

where oScrollBar is an object of ScrollBar type