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.
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)
Set the top scroll position to 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
It contains the following additional elements
obj
An HTML object element, with a 100% width/height to fill sizer. A style is set, so that
it is not visible. The onresize handler of its document member is used to receive an event
when the size of the content changes to recalculate the scrollbars
div
A innovaphone.ui.elm element, which creates a div, without any style set. The
innovaphone.ui.content member of this element is published as this.content, so that
the application can use it to put content into scrolling.
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;
}