@ne1410s/scrollr NPM

@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

ES demo tooltip

@ne1410s/cust-elems

@infinitebrahmanuniverse/nolb-_ne1 @everything-registry/sub-chunk-637

8 months ago

8 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

7 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

6 months ago

6 months ago

7 months ago

7 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

9 months ago

9 months ago

9 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

1 year ago

1 year ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

11 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

10 months ago

10 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

9 months ago

10 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago