ui1.scrolling

Interface

Scrolling provides a simple stylable scrollbar, by using a scrollable div and hiding the browser provided scrollbars.
Native browser scrollbar styling is used for webkit and firefox browsers.

innovaphone.ui1.Scrolling(style, maxWidth, maxHeight, width, color, cstyle)

Constructor function to create the scrolling element.

style: Style attribute for the outer html. This can for example be used to size and position the element.
maxWidth/maxHeight: Can be used, if the element does not have a fixed size. The size is determined automatically by the content. If the content is bigger than theses values, the scrollbars appear. A value of 0 is used for the normal automatic mode so that a scrollbar is displayed if needed. If -1 is used, the respective scrollbar is not displayed. If -2 is is used the respective scrollbar is always displayed.
width: The width of the scrollbar in pixel.
color: The color of the scrollbar.
cstyle: Styling which is used for the content div. Can be used for things like setting padding.

Properties

content: The ui1.Div element used for the content
add: Function to add content (calls content.add).
rem: Function to rem content (calls content.rem).
firstChild: Functions which returns the first child of content (calls content.firstChild).
onScroll: Property which can be set to a function, which is called when the scroll position changes
setScrollTop(top)
getScrollTop(): Returns the top scroll position.
setScrollBottom(bottom): Set the bottom scroll position to bottom.
getScrollBottom(): Returns the bottom scroll position.
scrollToBottom(): Scroll to bottom.
isScrollBottom(): Returns true if scroll is at bottom
isScrollTop(): Returns true if scroll is at top
contentHeight(): Returns the height of the content
scrollIntoView(node, scrollIntoViewOptions): Scrolls to the specified node, which is either an innovaphone.ui1.Node or a dom node.
The parameter scrollIntoViewOptions is currently just used in webkit browsers, as the dom node scrollIntoView function is directly used.
For other browsers, the own scrollbar implementation is used until these browsers support styling of a scrollbar.

Implementation

The element is build up from the following div elements (from the outside to the inside):

bars

This div has no style set by the element itself. The style attribute is set by the application. It must be a absolute or relative positioned block element. The maxWidth, maxHeight arguments refer to the outer size of this element.

It contains the following additional divs:

vb, v: These elements display the vertical scrollbar. vb defines the size and position and v displays the actual moving bar.
hb, h: Same as vb, v but for the horizontial scrollbar

outer

Absolute position inside bars. It defines the actual visible content. If scrollbars are visible it uses right and/or bottom of 8px to make room for the scrollbars. The overflow:hidden property makes shure the browser scrollbars from the content are not visible

inner

The actually scrolling element. When resize is called the first time, the right and bottom properties are set to a negative value representing the actual width of the browser scrollbars, so that the browser scrollbars are moved out of the visible area. If a scrollbar needs to be displayed, a positive value representing the size of the scrollbar is added, so that the actual scrollbar is displayed at the same place as the browser scrollbar would be.

sizer

A relative positioned inline-block element. The size of this is used to set the outer size automatically for automatic sizing

CSS styling for webkit and firefox

Webkit

You can put the following CSS to your CSS file to style the scrollbars in Webkit browsers:

div::-webkit-scrollbar {
  width:9px;
  height:9px;
}
div::-webkit-scrollbar-thumb {
  background-color: var(--accent); /* or whatever color you want */
}

Firefox

div {
scrollbar-color: var(--accent) transparent !important; /* !important overrides the javascript default setting */
scrollbar-width: thin !important;
}