<ne14-scrollr>
<span>Hello world</span>
</ne14-scrollr>
-
Use:
<script src="PATH_TO_UMD_SCRIPT"></script>
- Extend: npm i -S @ne1410s/scrollr
- There are no bespoke attributes exposed in this element
- There are no bespoke events raised by this element
As well as specifying the element directly in HTML, it is also possible to wrap an element with scrollbars dynamically:
window.ne_scrollr.apply('#existing-element', 'new-class-name');
- [Module].apply(selector, (newClass))
-- selector: CSS selector of element to wrap
-- newClass: Class to add to wrapper; e.g. to help deliver different styles to different scrollrs
- There are no bespoke properties exposed in this element
A reasonable amount of custom styling can be provided, by way of css variables:
ne14-scrollr {
--max-width: 300px;
--max-height: 200px;
}
-
--background
Background for the scroll area. Not normally necessary; the background of the wrapped content should work in most cases -
--color
Color for the draggable bars. Defaults to:rgb(193, 193, 193)
-
--cursor
Cursor for the draggable bars -
--cursor-x
Cursor override for the horizontal bar -
--cursor-y
Cursor override for the vertical bar -
--margin
Separation between bar and side (only when inactive) -
--max-width
Maximum width of the scroll area. Defaults to:100%
-
--max-height
Maximum height of the scroll area. Defaults to:600px
-
--min-length
Minimum bar length. Defaults to:30px
-
--outline
Outline for the bar -
--radius
Border radius for the bar -
--shadow
Shadow for the bar -
--thickness
Thickness of the bar. Defaults to:3px
-
--track-color
Color for the track behind the bar -
--track-cursor
Cursor for the track behind the bar -
--transition-duration
Duration for several tranistions. Defaults to:0.2s
-
--active-color
Color for the bar (when active). Defaults to:rgb(168, 168, 168)
-
--active-outline
Outline for the bar (when active) -
--active-radius
Border radius for the bar (when active) -
--active-shadow
Box shadow for the bar (when active) -
--active-thickness
Thickness of the bar (when active). Defaults to:10px
-
--active-track-color
Color for the track behind the bar (when active). Defaults to:rgba(241, 241, 241, 0.3)
*The active state of the bar is triggered on hover