0.1.157 • Published 11 months ago

@ne1410s/scrollr v0.1.157

Weekly downloads
15
License
MIT
Repository
github
Last release
11 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

11 months ago

0.1.156

11 months ago

0.1.155

11 months ago

0.1.154

11 months ago

0.1.153

11 months ago

0.1.152

11 months ago

0.1.150

11 months ago

0.1.151

11 months ago

0.1.147

12 months ago

0.1.146

12 months ago

0.1.149

12 months ago

0.1.148

12 months ago

0.1.143

12 months ago

0.1.145

12 months ago

0.1.144

12 months ago

0.1.142

12 months ago

0.1.141

1 year ago

0.1.140

1 year ago

0.1.139

1 year ago

0.1.138

1 year ago

0.1.137

1 year ago

0.1.136

1 year ago

0.1.135

1 year ago

0.1.134

1 year 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

2 years ago

0.1.71

2 years ago

0.1.70

2 years ago

0.1.68

2 years ago

0.1.69

2 years ago

0.1.67

2 years ago

0.1.66

2 years 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

3 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

5 years ago

0.0.10

5 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