Scrollbar Public
About this demo
A ScrollbarBehavior from ui-components gives a scrolling component scroll bars that look the same in every browser: the native ones are hidden and slim bars in the colors of the theme are drawn over the edges of the component. It keeps scrolling natively with the wheel, the keys and touch; the thumb can be dragged and a click on the track pages towards the click.
The first box keeps the browser's own scroll bar, to compare. The behavior draws the bars in the directions the CSS of the component lets it scroll, or in those given to it: the third box asks for the horizontal one only. The bars follow changes of the content: The + button re-renders the last box via Ajax, its bar picks up the new size and the behavior scrolls the box to the first of the lines added; the other buttons scroll it to its top, its bottom, a position and a line. Change the theme in the top bar and the bars follow it.
Browser scroll bar
Line 1: the quick brown fox jumps over the lazy dog, again and again and again.
Line 2: the quick brown fox jumps over the lazy dog, again and again and again.
Line 3: the quick brown fox jumps over the lazy dog, again and again and again.
Line 4: the quick brown fox jumps over the lazy dog, again and again and again.
Line 5: the quick brown fox jumps over the lazy dog, again and again and again.
Line 6: the quick brown fox jumps over the lazy dog, again and again and again.
Line 7: the quick brown fox jumps over the lazy dog, again and again and again.
Line 8: the quick brown fox jumps over the lazy dog, again and again and again.
Line 9: the quick brown fox jumps over the lazy dog, again and again and again.
Line 10: the quick brown fox jumps over the lazy dog, again and again and again.
Line 11: the quick brown fox jumps over the lazy dog, again and again and again.
Line 12: the quick brown fox jumps over the lazy dog, again and again and again.
Line 13: the quick brown fox jumps over the lazy dog, again and again and again.
Line 14: the quick brown fox jumps over the lazy dog, again and again and again.
Line 15: the quick brown fox jumps over the lazy dog, again and again and again.
Line 16: the quick brown fox jumps over the lazy dog, again and again and again.
Line 17: the quick brown fox jumps over the lazy dog, again and again and again.
Line 18: the quick brown fox jumps over the lazy dog, again and again and again.
Line 19: the quick brown fox jumps over the lazy dog, again and again and again.
Line 20: the quick brown fox jumps over the lazy dog, again and again and again.
Line 21: the quick brown fox jumps over the lazy dog, again and again and again.
Line 22: the quick brown fox jumps over the lazy dog, again and again and again.
Line 23: the quick brown fox jumps over the lazy dog, again and again and again.
Line 24: the quick brown fox jumps over the lazy dog, again and again and again.
Line 25: the quick brown fox jumps over the lazy dog, again and again and again.
Line 26: the quick brown fox jumps over the lazy dog, again and again and again.
Line 27: the quick brown fox jumps over the lazy dog, again and again and again.
Line 28: the quick brown fox jumps over the lazy dog, again and again and again.
Line 29: the quick brown fox jumps over the lazy dog, again and again and again.
Line 30: the quick brown fox jumps over the lazy dog, again and again and again.
Line 31: the quick brown fox jumps over the lazy dog, again and again and again.
Line 32: the quick brown fox jumps over the lazy dog, again and again and again.
Line 33: the quick brown fox jumps over the lazy dog, again and again and again.
Line 34: the quick brown fox jumps over the lazy dog, again and again and again.
Line 35: the quick brown fox jumps over the lazy dog, again and again and again.
Line 36: the quick brown fox jumps over the lazy dog, again and again and again.
Line 37: the quick brown fox jumps over the lazy dog, again and again and again.
Line 38: the quick brown fox jumps over the lazy dog, again and again and again.
Line 39: the quick brown fox jumps over the lazy dog, again and again and again.
Line 40: the quick brown fox jumps over the lazy dog, again and again and again.
Vertical
Line 1: the quick brown fox jumps over the lazy dog, again and again and again.
Line 2: the quick brown fox jumps over the lazy dog, again and again and again.
Line 3: the quick brown fox jumps over the lazy dog, again and again and again.
Line 4: the quick brown fox jumps over the lazy dog, again and again and again.
Line 5: the quick brown fox jumps over the lazy dog, again and again and again.
Line 6: the quick brown fox jumps over the lazy dog, again and again and again.
Line 7: the quick brown fox jumps over the lazy dog, again and again and again.
Line 8: the quick brown fox jumps over the lazy dog, again and again and again.
Line 9: the quick brown fox jumps over the lazy dog, again and again and again.
Line 10: the quick brown fox jumps over the lazy dog, again and again and again.
Line 11: the quick brown fox jumps over the lazy dog, again and again and again.
Line 12: the quick brown fox jumps over the lazy dog, again and again and again.
Line 13: the quick brown fox jumps over the lazy dog, again and again and again.
Line 14: the quick brown fox jumps over the lazy dog, again and again and again.
Line 15: the quick brown fox jumps over the lazy dog, again and again and again.
Line 16: the quick brown fox jumps over the lazy dog, again and again and again.
Line 17: the quick brown fox jumps over the lazy dog, again and again and again.
Line 18: the quick brown fox jumps over the lazy dog, again and again and again.
Line 19: the quick brown fox jumps over the lazy dog, again and again and again.
Line 20: the quick brown fox jumps over the lazy dog, again and again and again.
Line 21: the quick brown fox jumps over the lazy dog, again and again and again.
Line 22: the quick brown fox jumps over the lazy dog, again and again and again.
Line 23: the quick brown fox jumps over the lazy dog, again and again and again.
Line 24: the quick brown fox jumps over the lazy dog, again and again and again.
Line 25: the quick brown fox jumps over the lazy dog, again and again and again.
Line 26: the quick brown fox jumps over the lazy dog, again and again and again.
Line 27: the quick brown fox jumps over the lazy dog, again and again and again.
Line 28: the quick brown fox jumps over the lazy dog, again and again and again.
Line 29: the quick brown fox jumps over the lazy dog, again and again and again.
Line 30: the quick brown fox jumps over the lazy dog, again and again and again.
Line 31: the quick brown fox jumps over the lazy dog, again and again and again.
Line 32: the quick brown fox jumps over the lazy dog, again and again and again.
Line 33: the quick brown fox jumps over the lazy dog, again and again and again.
Line 34: the quick brown fox jumps over the lazy dog, again and again and again.
Line 35: the quick brown fox jumps over the lazy dog, again and again and again.
Line 36: the quick brown fox jumps over the lazy dog, again and again and again.
Line 37: the quick brown fox jumps over the lazy dog, again and again and again.
Line 38: the quick brown fox jumps over the lazy dog, again and again and again.
Line 39: the quick brown fox jumps over the lazy dog, again and again and again.
Line 40: the quick brown fox jumps over the lazy dog, again and again and again.
Horizontal
Both ways
Line 1: the quick brown fox jumps over the lazy dog, again and again and again.
Line 2: the quick brown fox jumps over the lazy dog, again and again and again.
Line 3: the quick brown fox jumps over the lazy dog, again and again and again.
Line 4: the quick brown fox jumps over the lazy dog, again and again and again.
Line 5: the quick brown fox jumps over the lazy dog, again and again and again.
Line 6: the quick brown fox jumps over the lazy dog, again and again and again.
Line 7: the quick brown fox jumps over the lazy dog, again and again and again.
Line 8: the quick brown fox jumps over the lazy dog, again and again and again.
Line 9: the quick brown fox jumps over the lazy dog, again and again and again.
Line 10: the quick brown fox jumps over the lazy dog, again and again and again.
Line 11: the quick brown fox jumps over the lazy dog, again and again and again.
Line 12: the quick brown fox jumps over the lazy dog, again and again and again.
Line 13: the quick brown fox jumps over the lazy dog, again and again and again.
Line 14: the quick brown fox jumps over the lazy dog, again and again and again.
Line 15: the quick brown fox jumps over the lazy dog, again and again and again.
Line 16: the quick brown fox jumps over the lazy dog, again and again and again.
Line 17: the quick brown fox jumps over the lazy dog, again and again and again.
Line 18: the quick brown fox jumps over the lazy dog, again and again and again.
Line 19: the quick brown fox jumps over the lazy dog, again and again and again.
Line 20: the quick brown fox jumps over the lazy dog, again and again and again.
Line 21: the quick brown fox jumps over the lazy dog, again and again and again.
Line 22: the quick brown fox jumps over the lazy dog, again and again and again.
Line 23: the quick brown fox jumps over the lazy dog, again and again and again.
Line 24: the quick brown fox jumps over the lazy dog, again and again and again.
Line 25: the quick brown fox jumps over the lazy dog, again and again and again.
Line 26: the quick brown fox jumps over the lazy dog, again and again and again.
Line 27: the quick brown fox jumps over the lazy dog, again and again and again.
Line 28: the quick brown fox jumps over the lazy dog, again and again and again.
Line 29: the quick brown fox jumps over the lazy dog, again and again and again.
Line 30: the quick brown fox jumps over the lazy dog, again and again and again.
Line 31: the quick brown fox jumps over the lazy dog, again and again and again.
Line 32: the quick brown fox jumps over the lazy dog, again and again and again.
Line 33: the quick brown fox jumps over the lazy dog, again and again and again.
Line 34: the quick brown fox jumps over the lazy dog, again and again and again.
Line 35: the quick brown fox jumps over the lazy dog, again and again and again.
Line 36: the quick brown fox jumps over the lazy dog, again and again and again.
Line 37: the quick brown fox jumps over the lazy dog, again and again and again.
Line 38: the quick brown fox jumps over the lazy dog, again and again and again.
Line 39: the quick brown fox jumps over the lazy dog, again and again and again.
Line 40: the quick brown fox jumps over the lazy dog, again and again and again.
Line 41: the quick brown fox jumps over the lazy dog, again and again and again.
Line 42: the quick brown fox jumps over the lazy dog, again and again and again.
Line 43: the quick brown fox jumps over the lazy dog, again and again and again.
Line 44: the quick brown fox jumps over the lazy dog, again and again and again.
Line 45: the quick brown fox jumps over the lazy dog, again and again and again.
Line 46: the quick brown fox jumps over the lazy dog, again and again and again.
Line 47: the quick brown fox jumps over the lazy dog, again and again and again.
Line 48: the quick brown fox jumps over the lazy dog, again and again and again.
Line 49: the quick brown fox jumps over the lazy dog, again and again and again.
Line 50: the quick brown fox jumps over the lazy dog, again and again and again.
Line 51: the quick brown fox jumps over the lazy dog, again and again and again.
Line 52: the quick brown fox jumps over the lazy dog, again and again and again.
Line 53: the quick brown fox jumps over the lazy dog, again and again and again.
Line 54: the quick brown fox jumps over the lazy dog, again and again and again.
Line 55: the quick brown fox jumps over the lazy dog, again and again and again.
Line 56: the quick brown fox jumps over the lazy dog, again and again and again.
Line 57: the quick brown fox jumps over the lazy dog, again and again and again.
Line 58: the quick brown fox jumps over the lazy dog, again and again and again.
Line 59: the quick brown fox jumps over the lazy dog, again and again and again.
Line 60: the quick brown fox jumps over the lazy dog, again and again and again.
Re-rendered via Ajax
Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7
Line 8
Line 9
Line 10
Line 11
Line 12
Line 13
Line 14
Line 15
Line 16
Line 17
Line 18
Line 19
Line 20