Global

Type Definitions

finbarOnChange(index)

A callback function to be invoked whenever the scroll index changes.

  • Specify a callback function in the onchange property of the options object parameter to the FinBar constructor.
  • Set or change the onchange property of your FinBar object directly.

The function you supply is invoked to handle the following events:

  • Invoked once by calling the index setter
  • Invoked once by calling the resize() method
  • Invoked repeatedly as user drags the scrollbar thumb
  • Invoked repeatedly as user spins the mouse wheel (but only when mouse pointer is positioned inside the container element)
  • If .paging: Invoked once when user clicks mouse in the page-up region (the area of the scrollbar above the thumb)
  • If .paging: Invoked once when user clicks mouse in the page-down region (the area of the scrollbar below the thumb)

The handler's calling context is the FinBar object. Note that this includes:

  • All the documented properties for the FinBar object
  • Any additional "custom" properties you may have included in the options object

And of course your handler will have access to all other objects in it's definition scope.

Parameters:
Name Type Description
index number

The scrollbar index, always a value in the range min..max. (Same as this.index.)

finbarOptions

As an "options" object, all properties herein are optional. Omitted properties take on the default values shown; if no default value is shown, the option (and its functionality) are undefined. All options, including any miscellaneous ("custom") options, become properties of this, the instantiated FinBar object. As such, they are all available to the onchange callback function, which is called with this as its context.

Type:
  • object
Properties:
Name Type Attributes Default Description
orientation number <optional>
 'vertical'

Overrides the prototype default. See orientation for details.
range rangeType <optional>
 {min:0,max:100}

See range for details.
max number <optional>
 100

Overrides the prototype default. See max for details.
index number <optional>
 min

Overrides the prototype default. See index for details. This sets the initial position of the thumb after instantiation.
onchange finbarOnChange <optional>

Overrides the prototype default. See onchange for details.
increment number <optional>
 1

Overrides the prototype default. See increment for details.
paging boolean <optional>
 true

Overrides the prototype default. See paging for details.
barStyles finbarStyles | null <optional>

Overrides the prototype default. See barStyles for details.
deltaProp string | null <optional>
 'deltaY'|'deltaX'

Overrides the prototype default. See deltaProp for details.

NOTE: The default values shown are for vertical and horizontal scrollbars, respectively.
classPrefix string <optional>

Adds an additional classname to the bar element's class list. See classPrefix for details.
container Element <optional>
 bar.parentElement

The element representing the content area. You only need to include this under special circumstances. Omitting this options assumes the container to be the scrollbar's parent element, as in the following typical configuration:

  • a container element, which contains two children:

    • a content element (typically larger than the container so it can scroll within it)
    • a scrollbar element (created by constructor; inserted into DOM by your code)

    Should you wish to use some other configuration of elements, you must indicate which element is the container the scrollbar is controlling. For example, if you wish to position your scrollbar outside the content area rather than within it.
content Element <optional>

This option is used to bind the scroll bar to some real content for the purpose of scrolling. Giving this option while omitting the onchange option signals the constructor to make this binding for you. When the API sees this configuration, it makes the following settings for you (so don't try to set any of these yourself):

  • this.min = 0
  • this.max = the content size - the container size - 1
  • this.increment = the container size
  • this.onchange = this.scrollRealContent

This property is not normally used for any other purpose. However, as with non-standard options, it will be mixed in to the object for future reference, such as in an onchange event handler. Therefore, if you do give a value for this option while also giving a value for the onchange option, it will be not be used by the constructor but will be available to your handler.

finbarStyles

Styles to be applied to scrollbar on resize.

Only enough of the above style properties need to be specified sufficient to place the scrollbar in its container. Specifically:

  • For horizontal scrollbars, some combination of left and either width or right.
  • For vertical scrollbars, some combination of top and either height or bottom.

Values for some or all of these may come from your stylesheets, in which case they may be omitted here.

Tip: Remember, CSS always measures values for right and bottom backwards from their respective container edges. That is, positive values measure towards the left and top, respectively.

In addition to the properties listed below, you can also use any of the orientationHashType pseudo-properties.

Regarding style values, the following to transformations are performed for your convenience:

  1. If style value is a number with no CSS unit specified, "px" is appended.
  2. If style value is a percentage and has margins, it is converted to pixel units, as a perentage of the scrollbar's parent element, minus its margins, with "px" appended. (CSS on its own does not consider margins part of the percentage.)
Type:
  • object
Properties:
Name Type Attributes Description
left number <optional>
top number <optional>
right number <optional>
bottom number <optional>
width number <optional>
height number <optional>

orientationHashType

In the following, two defaults are shown for each property, for the vertical and horizontal orientation hashes, respectively.

The description for each refers to the property relevant to the scrollbar's orientation.

Type:
  • object
Properties:
Name Type Default Description
coordinate string 'clientY'|'clientX'

The name of the MouseEvent property that holds the relevant viewport coordinate.
axis string 'pageY'|'pageX'

The name of the MouseEvent property that holds the relevant document coordinate.
size string 'height'|'width'

The name of the scrollbar's style object property that holds the extent (size) of the scrollbar.
outside string 'right'|'bottom'

The name of the scrollbar's style object property that refers to the edge of the scrollbar, typically anchored (by being set to 0) to that same edge inside the containing element.
inside string 'left'|'top'

The name of the scrollbar's style object property that refers to the edge of the scrollbar that is not typically anchored to the containing element.
leading string 'top'|'left'

The name of the scrollbar's style object property that refers to the low-order end (edge) of the scrollbar, typically anchored (by being set to 0) to that same edge inside the containing element.
trailing string 'bottom'|'right'

The name of the scrollbar's style object property that refers to the high-order end (edge) of the scrollbar, typically anchored (by being set to 0) to that same edge inside the containing element.
marginLeading string 'marginTop'|'marginLeft'

The name of the scrollbar's style object property that refers to the margin adjacent to the low-order end (edge) of the scrollbar, creating space between the end of the scrollbar and the edge of the content.
marginTrailing string 'marginBottom'|'marginRight'

The name of the scrollbar's style object property that refers to the margin adjacent to the high-order end (edge) of the scrollbar, creating space between the end of the scrollbar and the edge of the content.
thickness string 'width'|'height'

The name of the scrollbar's style object property that refers to the broadness of the scrollbar.
delta string 'deltaY'|'deltaX'

The name of the WheelEvent property that holds the relevant delta value for the wheel movement.

rangeType

A min/max range.

Type:
  • object
Properties:
Name Type Description
min number
max number