Scrollbars - Revision history

81.140.47.28 at 22:59, 24 September 2017

2017-09-24T22:59:36Z

Bablakeluke: /* Thumb and button attributes */

2017-02-28T21:17:49Z

‎Thumb and button attributes

Bablakeluke: /* Internal DOM Structure */

2017-02-28T21:16:40Z

‎Internal DOM Structure

151.229.186.156 at 15:47, 31 January 2017

2017-01-31T15:47:05Z

151.229.186.156: /* Internal DOM Structure */

2017-01-31T15:45:17Z

‎Internal DOM Structure

151.229.186.156: /* Styling examples */

2017-01-31T15:43:37Z

‎Styling examples

151.229.186.156: /* Styling examples */

2017-01-31T15:42:34Z

‎Styling examples

151.229.186.156 at 15:42, 31 January 2017

2017-01-31T15:42:12Z

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

2017-01-13T19:32:10Z

Created page with "PowerUI scrollbars, like all other UI components, are entirely defined in HTML and are easy to style. They consist of these three components: <syntaxhighlight lang="html"> <..."

New page

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

<syntaxhighlight lang="html">


<scrollbar>


<scrollthumb>


<scrollbutton>

</syntaxhighlight>

== Using a custom scrollbar - the scrollbar element ==

<syntaxhighlight lang="html">


<scrollbar target='elementID' orient='vertical'/>


<scrollbar target='elementID' orient='horizontal'/>

</syntaxhighlight>

{| class="wikitable"
|-
! 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 [[Virtual Elements|more on virtual elements]].

== Internal DOM Structure ==

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

<syntaxhighlight lang="html">


<scrollbar orient='vertical'>
<scrollbutton part='start' orient='up'/>
<scrollthumb orient='vertical'/>
<scrollbutton part='end' orient='down'/>
</scrollbar>


<scrollbar orient='horizontal'>
<scrollbutton part='start' orient='left'/>
<scrollthumb orient='horizontal'/>
<scrollbutton part='end' orient='right'/>
</scrollbar>

</syntaxhighlight>

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

{| class="wikitable"
|-
! 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
|}

@@ Line 77: / Line 77: @@
 </syntaxhighlight>
-The scrollbars act like direct parents of the element which is overflowing.
+The scrollbars act like direct child nodes of the element which is overflowing.
 == Thumb and button attributes ==

@@ Line 16: / Line 16: @@
 == Using a custom scrollbar - the scrollbar element ==
 <syntaxhighlight lang="html">
@@ Line 77: / Line 78: @@
 The scrollbars act like direct parents of the element which is overflowing.
 == Styling examples ==
@@ Line 113: / Line 139: @@
 </syntaxhighlight>

← Older revision		Revision as of 15:45, 31 January 2017
Line 75:		Line 75:

	</syntaxhighlight>		</syntaxhighlight>
		+
		+	The scrollbars act like direct parents of the element which is overflowing.

	== Styling examples ==		== Styling examples ==

@@ Line 80: / Line 80: @@
 <syntaxhighlight lang="css">
-// Every scrollbar will have a blue background
+/* Every scrollbar will have a blue background */
 scrollbar{
   background:blue;
+}
-// Just the scrollbars on the div with id='myOverflowingDiv' will have green backgrounds
+/* Just the scrollbars on the div with id='myOverflowingDiv' will have green backgrounds */
 #myOverflowingDiv scrollbar{
   background:green;
+}
-// All horizontal scrollbars
+/* All horizontal scrollbars */
 scrollbar[orient="horizontal"]{
   border:1px solid black;
+}
-// All scroll buttons
+/* All scroll buttons */
 scrollbutton{
   background:orange;
+}
-// All down pointing scroll buttons
+/* All down pointing scroll buttons */
 scrollbutton[orient="down"]{
   background:red;
+}
-// All buttons at the "end" of the bar (down and right)
+/* All buttons at the "end" of the bar (down and right) */
 scrollbutton[part="end"]{
   background:yellow;

@@ Line 78: / Line 78: @@
 == Styling examples ==
-<syntaxhighlight lang="html">
+<syntaxhighlight lang="css">
 // Every scrollbar will have a blue background

@@ Line 11: / Line 11: @@
 <!-- The up/down/left/right buttons -->
 <scrollbutton>
 </syntaxhighlight>

@@ Line 101: / Line 101: @@
 | Orientation of the button
 | ''none''
-| up, down, left, right
+| Buttons: up, down, left, right; Thumb: horizontal, vertical
 |}

← Older revision		Revision as of 15:42, 31 January 2017
Line 75:		Line 75:

	</syntaxhighlight>		</syntaxhighlight>
		+
		+	== Styling examples ==
		+
		+	<syntaxhighlight lang="html">
		+
		+	// 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;
		+	}
		+
		+	</syntaxhighlight>
		+

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