API Docs for: 2.10.19
Show:

oreesh-scrollbar Class

Defined in: src/elements/oreesh-scrollbar/oreesh-scrollbar.html:2
Module: oreesh

A textarea with x-axis and y-axis scrolling for overflow.

// Can be created dynamically
var scrollbar = new OreeshScrollbar();


<!-- Or via HTML -->
<!-- Basic example with y-axis scrolling-->
<oreesh-scrollbar style="display: inline-block; width: 200px; height: 200px;" scroll-y>
    ... Lots of content ...
</oreesh-scrollbar>

<!-- X-axis scrolling -->
<oreesh-scrollbar style="display: inline-block; width: 200px; height: 200px;" scroll-x>
    ... Lots of content ...
</oreesh-scrollbar>

<!-- Both scrollbars-->
<oreesh-scrollbar style="display: inline-block; width: 100px; height: 100px;" scroll-x scroll-y>
    ... Lots of content ...
</oreesh-scrollbar>

<!-- with hover-to-show scroll bars which are animated -->
<oreesh-scrollbar style="display: inline-block; width: 100px; height: 100px;" scroll-y hover-to-show animation>
    ... Lots of content ...
</oreesh-scrollbar>

Methods

getChildren

()

Defined in src/elements/oreesh-scrollbar/oreesh-scrollbar.html:92

Returns the children in the content div.

scrollContentBottom

(
  • px
)

Defined in src/elements/oreesh-scrollbar/oreesh-scrollbar.html:76

If this scrollbar has the scroll-y attribute, then this will scroll the content to the given (absolute) pixel value, and move the scroll bar accordingly. Added for convenience.

scrollbar.scrollContentBottom(50);  // Scroll to 50px from the bottom

Parameters:

  • px Number

    The pixel value that will be scrolled to from the bottom

scrollContentLeft

(
  • px
)

Defined in src/elements/oreesh-scrollbar/oreesh-scrollbar.html:84

If this scrollbar has the scroll-x attribute, then this will scroll the content to the given (absolute) pixel value, and move the scroll bar accordingly.

scrollbar.scrollContentLeft(50);    // Scroll to 50px from the left

Parameters:

  • px Number

    The pixel value that will be scrolled to from the left

scrollContentTop

(
  • px
)

Defined in src/elements/oreesh-scrollbar/oreesh-scrollbar.html:58

If this scrollbar has the scroll-y attribute, then this will scroll the content to the given (absolute) pixel value, and move the scroll bar accordingly.

scrollbar.scrollContentTop(50); // Scroll to 50px from the top

Parameters:

  • px Number

    The pixel value that will be scrolled to from the top

scrollContentYRelative

(
  • direction
  • px
)

Defined in src/elements/oreesh-scrollbar/oreesh-scrollbar.html:66

If this scrollbar has the scroll-y attribute, then this will scroll the content relative to the current position.

scrollbar.scrollContentYRelative(1, 50);    // Scroll 50px from the current position

Parameters:

  • direction Number

    The direction to scroll (positive vs negative)

  • px Number

    The pixel value

Attributes

hover-to-show

Defined in src/elements/oreesh-scrollbar/oreesh-scrollbar.html:33

Scroll bars are hidden unless the element is moused-over

scroll-x

Defined in src/elements/oreesh-scrollbar/oreesh-scrollbar.html:38

Adds a scrollbar to the bottom of the textarea for the x-axis.

scroll-y

Defined in src/elements/oreesh-scrollbar/oreesh-scrollbar.html:43

Adds a scrollbar to the right-side of the textarea for the y-axis.

size

Defined in src/elements/oreesh-scrollbar/oreesh-scrollbar.html:48

Sets the size of the scrollbars. Options are large and small.

theme

Defined in src/elements/oreesh-scrollbar/oreesh-scrollbar.html:53

Theme of the scrollbar. Options are black and white

Events

scroll

Defined in src/elements/oreesh-scrollbar/oreesh-scrollbar.html:97

Event which is fired if there is scrolling in any direction

Event Payload:

  • detail.axis String

    Indiciates which axis was scrolled. Will be either x or y

  • detail.top String

    The current top styling of the scrollbar

  • detail.left String

    The current left styling of the scrollbar