Scroll Area
Scrollable region with styled scrollbars and optional fade edges that follow the scroll position.
INSTALL
1pnpm dlx @sayagodev/mo add scroll-areaOr import the files from the package (no copy):
1import "@sayagodev/mo/css/scroll-area.css";2import "@sayagodev/mo/js/scroll-area.js";
EXAMPLES
Default
Tags
v1.2.0-beta.49
v1.2.0-beta.48
v1.2.0-beta.47
v1.2.0-beta.46
v1.2.0-beta.45
v1.2.0-beta.44
v1.2.0-beta.43
v1.2.0-beta.42
v1.2.0-beta.41
v1.2.0-beta.40
v1.2.0-beta.39
v1.2.0-beta.38
v1.2.0-beta.37
v1.2.0-beta.36
v1.2.0-beta.35
v1.2.0-beta.34
v1.2.0-beta.33
v1.2.0-beta.32
v1.2.0-beta.31
v1.2.0-beta.30
v1.2.0-beta.29
v1.2.0-beta.28
v1.2.0-beta.27
v1.2.0-beta.26
v1.2.0-beta.25
v1.2.0-beta.24
v1.2.0-beta.23
v1.2.0-beta.22
v1.2.0-beta.21
v1.2.0-beta.20
v1.2.0-beta.19
v1.2.0-beta.18
v1.2.0-beta.17
v1.2.0-beta.16
v1.2.0-beta.15
v1.2.0-beta.14
v1.2.0-beta.13
v1.2.0-beta.12
v1.2.0-beta.11
v1.2.0-beta.10
v1.2.0-beta.9
v1.2.0-beta.8
v1.2.0-beta.7
v1.2.0-beta.6
v1.2.0-beta.5
v1.2.0-beta.4
v1.2.0-beta.3
v1.2.0-beta.2
v1.2.0-beta.1
v1.2.0-beta.0
1<div data-scroll-area style="--mo-scroll-area-height: 18rem; --mo-scroll-area-width: 12rem">2 <div class="p-4">3 <h4 class="mb-4">Tags</h4>4 <div>v1.2.0-beta.49</div>5 <hr class="mt-2 mb-2" />6 <div>v1.2.0-beta.48</div>7 <hr class="mt-2 mb-2" />8 <div>v1.2.0-beta.47</div>9 <hr class="mt-2 mb-2" />10 <div>v1.2.0-beta.46</div>11 <hr class="mt-2 mb-2" />12 <div>v1.2.0-beta.45</div>13 <hr class="mt-2 mb-2" />14 <div>v1.2.0-beta.44</div>15 <hr class="mt-2 mb-2" />16 <div>v1.2.0-beta.43</div>17 <hr class="mt-2 mb-2" />18 <div>v1.2.0-beta.42</div>19 <hr class="mt-2 mb-2" />20 <div>v1.2.0-beta.41</div>21 <hr class="mt-2 mb-2" />22 <div>v1.2.0-beta.40</div>23 <hr class="mt-2 mb-2" />24 <div>v1.2.0-beta.39</div>25 <hr class="mt-2 mb-2" />26 <div>v1.2.0-beta.38</div>27 <hr class="mt-2 mb-2" />28 <div>v1.2.0-beta.37</div>29 <hr class="mt-2 mb-2" />30 <div>v1.2.0-beta.36</div>31 <hr class="mt-2 mb-2" />32 <div>v1.2.0-beta.35</div>33 <hr class="mt-2 mb-2" />34 <div>v1.2.0-beta.34</div>35 <hr class="mt-2 mb-2" />36 <div>v1.2.0-beta.33</div>37 <hr class="mt-2 mb-2" />38 <div>v1.2.0-beta.32</div>39 <hr class="mt-2 mb-2" />40 <div>v1.2.0-beta.31</div>41 <hr class="mt-2 mb-2" />42 <div>v1.2.0-beta.30</div>43 <hr class="mt-2 mb-2" />44 <div>v1.2.0-beta.29</div>45 <hr class="mt-2 mb-2" />46 <div>v1.2.0-beta.28</div>47 <hr class="mt-2 mb-2" />48 <div>v1.2.0-beta.27</div>49 <hr class="mt-2 mb-2" />50 <div>v1.2.0-beta.26</div>51 <hr class="mt-2 mb-2" />52 <div>v1.2.0-beta.25</div>53 <hr class="mt-2 mb-2" />54 <div>v1.2.0-beta.24</div>55 <hr class="mt-2 mb-2" />56 <div>v1.2.0-beta.23</div>57 <hr class="mt-2 mb-2" />58 <div>v1.2.0-beta.22</div>59 <hr class="mt-2 mb-2" />60 <div>v1.2.0-beta.21</div>61 <hr class="mt-2 mb-2" />62 <div>v1.2.0-beta.20</div>63 <hr class="mt-2 mb-2" />64 <div>v1.2.0-beta.19</div>65 <hr class="mt-2 mb-2" />66 <div>v1.2.0-beta.18</div>67 <hr class="mt-2 mb-2" />68 <div>v1.2.0-beta.17</div>69 <hr class="mt-2 mb-2" />70 <div>v1.2.0-beta.16</div>71 <hr class="mt-2 mb-2" />72 <div>v1.2.0-beta.15</div>73 <hr class="mt-2 mb-2" />74 <div>v1.2.0-beta.14</div>75 <hr class="mt-2 mb-2" />76 <div>v1.2.0-beta.13</div>77 <hr class="mt-2 mb-2" />78 <div>v1.2.0-beta.12</div>79 <hr class="mt-2 mb-2" />80 <div>v1.2.0-beta.11</div>81 <hr class="mt-2 mb-2" />82 <div>v1.2.0-beta.10</div>83 <hr class="mt-2 mb-2" />84 <div>v1.2.0-beta.9</div>85 <hr class="mt-2 mb-2" />86 <div>v1.2.0-beta.8</div>87 <hr class="mt-2 mb-2" />88 <div>v1.2.0-beta.7</div>89 <hr class="mt-2 mb-2" />90 <div>v1.2.0-beta.6</div>91 <hr class="mt-2 mb-2" />92 <div>v1.2.0-beta.5</div>93 <hr class="mt-2 mb-2" />94 <div>v1.2.0-beta.4</div>95 <hr class="mt-2 mb-2" />96 <div>v1.2.0-beta.3</div>97 <hr class="mt-2 mb-2" />98 <div>v1.2.0-beta.2</div>99 <hr class="mt-2 mb-2" />100 <div>v1.2.0-beta.1</div>101 <hr class="mt-2 mb-2" />102 <div>v1.2.0-beta.0</div>103 </div>104</div>105
Horizontal
Design
Engineering
Marketing
Product
Research
Sales
Support
Operations
Finance
Legal
People
IT
1<div data-scroll-area style="--mo-scroll-area-width: 24rem">2 <div class="flex gap-4 p-4">3 <span class="badge">Design</span>4 <span class="badge">Engineering</span>5 <span class="badge">Marketing</span>6 <span class="badge">Product</span>7 <span class="badge">Research</span>8 <span class="badge">Sales</span>9 <span class="badge">Support</span>10 <span class="badge">Operations</span>11 <span class="badge">Finance</span>12 <span class="badge">Legal</span>13 <span class="badge">People</span>14 <span class="badge">IT</span>15 </div>16</div>17
Tags
Tags
Design
Engineering
Marketing
Product
Research
Sales
Support
Operations
Finance
Legal
People
IT
Security
Data
Infrastructure
Quality
Accessibility
Localization
Analytics
Growth
Platform
Developer tools
Documentation
Community
1<div data-scroll-area style="--mo-scroll-area-height: 8rem; --mo-scroll-area-width: 16rem">2 <div class="p-4">3 <h4 class="mb-4">Tags</h4>4 <div class="flex flex-wrap gap-2">5 <span class="badge">Design</span>6 <span class="badge">Engineering</span>7 <span class="badge">Marketing</span>8 <span class="badge">Product</span>9 <span class="badge">Research</span>10 <span class="badge">Sales</span>11 <span class="badge">Support</span>12 <span class="badge">Operations</span>13 <span class="badge">Finance</span>14 <span class="badge">Legal</span>15 <span class="badge">People</span>16 <span class="badge">IT</span>17 <span class="badge">Security</span>18 <span class="badge">Data</span>19 <span class="badge">Infrastructure</span>20 <span class="badge">Quality</span>21 <span class="badge">Accessibility</span>22 <span class="badge">Localization</span>23 <span class="badge">Analytics</span>24 <span class="badge">Growth</span>25 <span class="badge">Platform</span>26 <span class="badge">Developer tools</span>27 <span class="badge">Documentation</span>28 <span class="badge">Community</span>29 </div>30 </div>31</div>32
Fades
- Inbox triage
- Design review
- API contract
- QA pass
- Launch notes
- Metrics follow-up
- Retro actions
- Hiring loop
data-fades — block axis
Design
Engineering
Marketing
Product
Research
Sales
Support
Operations
data-fades="x" — inline axis
1<div class="vstack gap-4">2 <div>3 <div data-scroll-area data-fades style="--mo-scroll-area-height: 9rem">4 <ul class="unstyled vstack p-4">5 <li><span class="badge">Inbox triage</span></li>6 <li><span class="badge">Design review</span></li>7 <li><span class="badge">API contract</span></li>8 <li><span class="badge">QA pass</span></li>9 <li><span class="badge">Launch notes</span></li>10 <li><span class="badge">Metrics follow-up</span></li>11 <li><span class="badge">Retro actions</span></li>12 <li><span class="badge">Hiring loop</span></li>13 </ul>14 </div>15 <p class="text-light align-center mt-2">data-fades — block axis</p>16 </div>17 18 <div>19 <div data-scroll-area data-fades="x" style="--mo-scroll-area-width: 24rem">20 <div class="flex gap-4 p-4">21 <span class="badge">Design</span>22 <span class="badge">Engineering</span>23 <span class="badge">Marketing</span>24 <span class="badge">Product</span>25 <span class="badge">Research</span>26 <span class="badge">Sales</span>27 <span class="badge">Support</span>28 <span class="badge">Operations</span>29 </div>30 </div>31 <p class="text-light align-center mt-2">data-fades="x" — inline axis</p>32 </div>33</div>34
USAGE
1<div data-scroll-area>2 <div class="p-4">…</div>3</div>4 5<!-- fade edges (block axis; "x" inline, "xy" both) -->6<div data-scroll-area data-fades>…</div>
API
NAMEKINDDESCRIPTION
[data-scroll-area]attributeThe scrollable box; thin scrollbar, border-color thumb
data-fades | "x" | "xy"attributeMask-image edge fades per axis; static without scroll-area.js
data-at-top/bottom/left/rightattributeSet by scroll-area.js at an edge — that side renders crisp
--mo-scroll-area-height / -widthtokenBox sizing hooks; no default height
--mo-scroll-fade-sizetokenFade depth, default min(2.5rem, 12%)
FILES
src/css/scroll-area.csssrc/js/scroll-area.jsInstall:
mo add scroll-areaTHEMING · PLAYGROUND
This is the exact component from the examples above, wearing a completely different theme. Edit the tokens and --mo-* hooks in the editor — autocomplete knows them all — and the preview obeys in real time. Your CSS always wins.
Global tokens
--border--muted-foreground--radiusComponent hooks
--mo-scroll-area-height--mo-scroll-area-width--mo-scroll-fade-sizePreview
Your CSS
Try it: type --mo- for the component hooks, or edit any value — the preview obeys in real time.