0.1.157 • Published 10 months ago

@ne1410s/scrollr v0.1.157

Weekly downloads
15
License
MIT
Repository
github
Last release
10 months ago

@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

0.1.157

10 months ago

0.1.156

10 months ago

0.1.155

10 months ago

0.1.154

10 months ago

0.1.153

10 months ago

0.1.152

10 months ago

0.1.150

11 months ago

0.1.151

11 months ago

0.1.147

11 months ago

0.1.146

11 months ago

0.1.149

11 months ago

0.1.148

11 months ago

0.1.143

11 months ago

0.1.145

11 months ago

0.1.144

11 months ago

0.1.142

11 months ago

0.1.141

11 months ago

0.1.140

12 months ago

0.1.139

12 months ago

0.1.138

12 months ago

0.1.137

12 months ago

0.1.136

12 months ago

0.1.135

12 months ago

0.1.134

12 months ago

0.1.133

1 year ago

0.1.132

1 year ago

0.1.131

1 year ago

0.1.118

1 year ago

0.1.117

1 year ago

0.1.119

1 year ago

0.1.114

1 year ago

0.1.113

1 year ago

0.1.116

1 year ago

0.1.115

1 year ago

0.1.110

1 year ago

0.1.112

1 year ago

0.1.111

1 year ago

0.1.129

1 year ago

0.1.128

1 year ago

0.1.125

1 year ago

0.1.124

1 year ago

0.1.127

1 year ago

0.1.126

1 year ago

0.1.121

1 year ago

0.1.120

1 year ago

0.1.123

1 year ago

0.1.122

1 year ago

0.1.130

1 year ago

0.1.98

1 year ago

0.1.99

1 year ago

0.1.107

1 year ago

0.1.106

1 year ago

0.1.109

1 year ago

0.1.108

1 year ago

0.1.103

1 year ago

0.1.102

1 year ago

0.1.105

1 year ago

0.1.104

1 year ago

0.1.101

1 year ago

0.1.100

1 year ago

0.1.97

1 year ago

0.1.96

1 year ago

0.1.95

1 year ago

0.1.94

1 year ago

0.1.93

1 year ago

0.1.92

1 year ago

0.1.91

1 year ago

0.1.90

1 year ago

0.1.89

1 year ago

0.1.88

1 year ago

0.1.87

1 year ago

0.1.86

1 year ago

0.1.85

1 year ago

0.1.84

1 year ago

0.1.83

1 year ago

0.1.82

1 year ago

0.1.81

1 year ago

0.1.80

1 year ago

0.1.79

1 year ago

0.1.78

1 year ago

0.1.77

1 year ago

0.1.76

1 year ago

0.1.75

1 year ago

0.1.74

1 year ago

0.1.73

1 year ago

0.1.72

1 year ago

0.1.71

1 year ago

0.1.70

1 year ago

0.1.68

1 year ago

0.1.69

1 year ago

0.1.67

1 year ago

0.1.66

1 year ago

0.1.65

2 years ago

0.1.64

2 years ago

0.1.63

2 years ago

0.1.61

2 years ago

0.1.62

2 years ago

0.1.60

2 years ago

0.1.59

2 years ago

0.1.58

2 years ago

0.1.57

2 years ago

0.1.56

2 years ago

0.1.55

2 years ago

0.1.54

2 years ago

0.1.53

2 years ago

0.1.52

2 years ago

0.1.51

2 years ago

0.1.50

2 years ago

0.1.49

2 years ago

0.1.46

2 years ago

0.1.47

2 years ago

0.1.48

2 years ago

0.1.45

2 years ago

0.1.44

2 years ago

0.1.43

2 years ago

0.1.42

2 years ago

0.1.41

2 years ago

0.1.40

2 years ago

0.1.39

2 years ago

0.1.38

2 years ago

0.1.37

2 years ago

0.1.36

2 years ago

0.1.35

2 years ago

0.1.33

2 years ago

0.1.34

2 years ago

0.1.32

2 years ago

0.1.31

2 years ago

0.1.30

2 years ago

0.1.29

2 years ago

0.1.10

2 years ago

0.1.11

2 years ago

0.1.12

2 years ago

0.1.13

2 years ago

0.1.14

2 years ago

0.1.15

2 years ago

0.1.8

2 years ago

0.1.7

2 years ago

0.1.9

2 years ago

0.1.6

2 years ago

0.1.5

2 years ago

0.1.27

2 years ago

0.1.28

2 years ago

0.1.20

2 years ago

0.1.21

2 years ago

0.1.22

2 years ago

0.1.23

2 years ago

0.1.24

2 years ago

0.1.25

2 years ago

0.1.26

2 years ago

0.1.16

2 years ago

0.1.17

2 years ago

0.1.18

2 years ago

0.1.19

2 years ago

0.1.4

2 years ago

0.1.3

2 years ago

0.1.2

3 years ago

0.1.1

3 years ago

0.0.37

3 years ago

0.1.0

3 years ago

0.0.36

3 years ago

0.0.34

4 years ago

0.0.35

4 years ago

0.0.33

4 years ago

0.0.32

4 years ago

0.0.31

4 years ago

0.0.30

4 years ago

0.0.29

4 years ago

0.0.28

4 years ago

0.0.27

4 years ago

0.0.26

4 years ago

0.0.25

4 years ago

0.0.24

4 years ago

0.0.22

4 years ago

0.0.23

4 years ago

0.0.21

4 years ago

0.0.20

4 years ago

0.0.19

4 years ago

0.0.18

4 years ago

0.0.13

4 years ago

0.0.14

4 years ago

0.0.15

4 years ago

0.0.16

4 years ago

0.0.17

4 years ago

0.0.12

4 years ago

0.0.11

4 years ago

0.0.10

4 years ago

0.0.9

5 years ago

0.0.8

5 years ago

0.0.7

5 years ago

0.0.6

5 years ago

0.0.5

5 years ago

0.0.3

5 years ago

0.0.4

5 years ago

0.0.2

5 years ago

0.0.1

5 years ago