Scrollbars

From PowerUI
Revision as of 15:42, 31 January 2017 by 151.229.186.156 (talk) (Styling examples)
Jump to: navigation, search

PowerUI scrollbars, like all other UI components, are entirely defined in HTML and are easy to style. They consist of these three components:

<!-- The element itself (you can actually use this directly too; see more below) -->
<scrollbar>

<!-- The draggable thumb -->
<scrollthumb>

<!-- The up/down/left/right buttons -->
<scrollbutton>

Using a custom scrollbar - the scrollbar element

<!-- A vertical scrollbar -->
<scrollbar target='elementID' orient='vertical'/>

<!-- A horizontal scrollbar -->
<scrollbar target='elementID' orient='horizontal'/>
Attribute name Optional What it's for Default value Possible values
target yes The element ID the scrollbar will scroll none An element ID.
orient yes Is this a vertical or horizontal scrollbar horizontal horizontal, vertical

When the thumb is dragged around, the scrollbar will fire an onchange event. You can hook up those events in the same way you would any other element. To obtain progress information, you'll want to get hold of the thumb element (available via scrollbarElement.Thumb).

Overflow:auto or Overflow:scroll

When an element automatically generates scrollbars, they become virtual elements in the shadow DOM. To access those, see more on virtual elements.

Internal DOM Structure

Don't type this out to use a scrollbar - this is provided for CSS selection purposes:

<!-- A complete vertical scrollbar -->
<scrollbar orient='vertical'>
  <scrollbutton part='start' orient='up'/>
  <scrollthumb orient='vertical'/>
  <scrollbutton part='end' orient='down'/>
</scrollbar>

<!-- A full horizontal scrollbar -->
<scrollbar orient='horizontal'>
  <scrollbutton part='start' orient='left'/>
  <scrollthumb orient='horizontal'/>
  <scrollbutton part='end' orient='right'/>
</scrollbar>

Styling examples

// Every scrollbar will have a blue background
scrollbar{
 background:blue;
}

// Just the scrollbars on the div with id='myOverflowingDiv' will have green backgrounds
#myOverflowingDiv scrollbar{
 background:green;
}

// All horizontal scrollbars
scrollbar[orient="horizontal"]{
 border:1px solid black;
}

// All scroll buttons
scrollbutton{
 background:orange;
}

// All down pointing scroll buttons
scrollbutton[orient="down"]{
 background:red;
}

// All buttons at the "end" of the bar (down and right)
scrollbutton[part="end"]{
 background:yellow;
}


Both the buttons and the thumb automatically set some additional attributes which can be used with the attribute CSS selector.

Attribute name Optional What it's for Default value Possible values
part no Start or end of the scrollbar none start, end
orient no Orientation of the button none up, down, left, right