Select a theme:
This div is just a regular overflowing div. It has not been altered by scrollbar.js.
It can also be resized. No wait! It cannot be resized in IE, Edge and mobile browsers it seems! :(
Here scrollbar.js has been applied. The scrollbar and it's components can be styled via CSS.
The native scrolling behavior is kept intact. As such the following means of scrolling still apply and act as usual:
- Mouse wheel
- Autoscroll
- Arrow keys
- Page up/down keys
- Selecting text beyond the visible viewport
- Scrolling the outer box once the end has been reached
A stylable resize handle has also been added. It acts like a polyfill for IE.
Sadly it does not apply to Edge, because it won't report if the CSS resize property exists on the element.
On mobile it doesn't work because no touch actions have been implemented yet. #2
This one can be scrolled on both axes.
There is also a behavior that is kept intact on touch devices.
- Scrolling will lock onto an axes when no clear diagonal movement is registered
It works on any content. Red Panda by Mathias Appel
The script will check in real-time if the size of the content has changed and updates the scrollbar size accordingly.
It will also detect if the scrollbar is needed in the first place or if the content fits even without scrolling.
This box has no resize handle.
This box has no resize handle but a corner.