Class: FinBar

Table of wheel normals to webkit.

This object is a dictionary of platform dictionaries, keyed by:

• mac — macOS
• win — Window

Each platform dictionary is keyed by:

• webkit — Chrome, Opera, Safari
• moz — Firefox
• ms — IE 11 (Windows only)
• edge — Edge (Windows only)

The caller inserts this element into the DOM (typically into the content container) and then calls its resize() method.

Thus the node tree is typically:

• A content container element, which contains:
  • The content element(s)
  • This scrollbar element, which in turn contains:
    • The thumb element

Set by the constructor. See the similarly named property in the finbarOptions object.

This is a value to be assigned to styles on each call to resize(). That is, a hash of values to be copied to the scrollbar element's style object on resize; or null for none.

Set by the constructor. See the similarly named property in the finbarOptions object.

The bar element's class list will always include finbar-vertical (or finbar-horizontal based on the current orientation). Whenever this property is set to some value, first the old prefix+orientation is removed from the bar element's class list; then the new prefix+orientation is added to the bar element's class list. This property causes an additional class name to be added to the bar element's class list. Therefore, this property will only add at most one additional class name to the list.

To remove classname-orientation from the bar element's class list, set this property to a falsy value, such as null.

NOTE: You only need to specify an additional class name when you need to have mulltiple different styles of scrollbars on the same page. If this is not a requirement, then you don't need to make a new class; you would just create some additional rules using the same selectors in the built-in stylesheet (../css/finbars.css): div.finbar-vertical (or div.finbar-horizontal) for the scrollbar div.finbar-vertical > div (or div.finbar-horizontal > div) for the "thumb."

Of course, your rules should come after the built-ins.

Set by the constructor. See the similarly named property in the finbarOptions object.

Useful values are 'deltaX', 'deltaY', or 'deltaZ'. A value of null means to ignore mouse wheel events entirely.

The mouse wheel is one-dimensional and only emits events with deltaY data. This property is provided so that you can override the default of 'deltaX' with a value of 'deltaY' on your horizontal scrollbar primarily to accommodate certain "panoramic" interface designs where the mouse wheel should control horizontal rather than vertical scrolling. Just give { deltaProp: 'deltaY' } in your horizontal scrollbar instantiation.

Caveat: Note that a 2-finger drag on an Apple trackpad emits events with both deltaX and deltaY data so you might want to delay making the above adjustment until you can determine that you are getting Y data only with no X data at all (which is a sure bet you on a mouse wheel rather than a trackpad).

Default value of multiplier for WheelEvent#deltaX (horizontal scrolling delta).

Default value of multiplier for WheelEvent#deltaY (vertical scrolling delta).

Default value of multiplier for WheelEvent#deltaZ (delpth scrolling delta).

Set by the constructor. See the similarly named property in the finbarOptions object.

Can also be given as a parameter to the resize method, which is pertinent because content area size changes affect the definition of a "pageful." However, you only need to do this if this value is being used. It not used when:

• you define paging.up and paging.down
• your scrollbar is using scrollRealContent

This is the position of the scroll thumb.

Setting this value clamps it to min..max, scroll the content, and moves thumb.

Getting this value returns the current index. The returned value will be in the range min..max. It is intentionally not rounded.

Use this value as an alternative to (or in addition to) using the onchange callback function.

Set by the orientation setter to either the vertical or the horizontal orientation hash. The property should always be synchronized with orientation; do not update directly!

This object is used internally to access scrollbars' DOM element properties in a generalized way without needing to constantly query the scrollbar orientation. For example, instead of explicitly coding this.bar.top for a vertical scrollbar and this.bar.left for a horizontal scrollbar, simply code this.bar[this.oh.leading] instead. See the orientationHashType definition for details.

This object is useful externally for coding generalized finbarOnChange event handler functions that serve both horizontal and vertical scrollbars.

Set by the constructor via the similarly named property in the finbarOptions object. After instantiation, this.onchange may be updated directly.

This event handler is called whenever the value of the scrollbar is changed through user interaction. The typical use case is when the content is scrolled. It is called with the FinBar object as its context and the current value of the scrollbar (its index, rounded) as the only parameter.

Set this property to null to stop emitting such events.

Set by the constructor to either 'vertical' or 'horizontal'. See the similarly named property in the finbarOptions object.

Useful values are 'vertical' (the default) or 'horizontal'.

Setting this property resets this.oh and this.deltaProp and changes the class names so as to reposition the scrollbar as per the CSS rules for the new orientation.

Set by the constructor. See the similarly named property in the finbarOptions object.

If truthy, listen for clicks in page-up and page-down regions of scrollbar.

If an object, call .paging.up() on page-up clicks and .paging.down() will be called on page-down clicks.

Changing the truthiness of this value after instantiation currently has no effect.

Set by the constructor. These values are the limits for index.

The setter accepts an object with exactly two numeric properties: .min which must be less than .max. The values are extracted and the object is discarded.

The getter returns a new object with .min and '.max`.

See type definition for more details. These styles are applied directly to the scrollbar's bar element.

Values are adjusted as follows before being applied to the element:

1. Included "pseudo-property" names from the scrollbar's orientation hash, oh, are translated to actual property names before being applied.
2. When there are margins, percentages are translated to absolute pixel values because CSS ignores margins in its percentage calculations.
3. If you give a value without a unit (a raw number), "px" unit is appended.

General notes:

1. It is always preferable to specify styles via a stylesheet. Only set this property when you need to specifically override (a) stylesheet value(s).
2. Can be set directly or via calls to the resize method.
3. Should only be set after the scrollbar has been inserted into the DOM.
4. Before applying these new values to the element, all in-line style values are reset (by removing the element's style attribute), exposing inherited values (from stylesheets).
5. Empty object has no effect.
6. Falsey value in place of object has no effect.

CAVEAT: Do not attempt to treat the object you assign to this property as if it were this.bar.style. Specifically, changing this object after assigning it will have no effect on the scrollbar. You must assign it again if you want it to have an effect.

The thumb element's parent element is always the bar element.

This property is typically referenced internally only. The size and position of the thumb element is maintained by _calcThumb().

Supports non-classical scrollbar scenarios where vertical scroll bar may be on left and horizontal scrollbar may be on top, in which case you want to shorten the "leading end" rather than the trailing end.

Unhooks all the event handlers and then removes the element from the DOM. Always call this method prior to disposing of the scrollbar object.

This method recalculates the thumb size and position. Call it once after inserting your scrollbar into the DOM, and repeatedly while resizing the scrollbar (which typically happens when the scrollbar's parent is resized by user.

This function shifts args if first arg omitted.

In the "classical" scenario where vertical scroll bar is on the right and horizontal scrollbar is on the bottom, you want to shorten the "trailing end" (bottom and right ends, respectively) of at least one of them so they don't overlay.

This convenience function is an programmatic alternative to hardcoding the correct style with the correct value in your stylesheet; or setting the correct style with the correct value in the barStyles object.