@ne1410s/scrollr

Customisable & lightweight scrollbars.

<ne14-scrollr>
  <span>Hello world</span>
</ne14-scrollr>

• Use: <script src="PATH_TO_UMD_SCRIPT"></script>
• Extend: npm i -S @ne1410s/scrollr

Attributes

• There are no bespoke attributes exposed in this element

Events

• There are no bespoke events raised by this element

Methods

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

Properties

• There are no bespoke properties exposed in this element

CSS Variables

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