andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Autoscoping (#103)

Browse Source 
* Add autoscoping with generated demo

* Remove manual demo from all snippets

* Add JavaScript inside IIFE

* Align mouse-cursor-gradient-tracking.md to demo code

* Match snippets to demo

* Update CONTRIBUTING.md

* Create reusable function for code extraction
This commit is contained in:
atomiks
2018-10-05 09:18:51 +10:00
committed by GitHub
parent 2afb2fe88a
commit 11eff23e47
41 changed files with 107 additions and 1102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
snippets/overflow-scroll-gradient.md
View File

@ -7,7 +7,14 @@ Adds a fading gradient to an overflowing element to better indicate there is mor
```html
<div class="overflow-scroll-gradient">
<div class="overflow-scroll-gradient__scroller">
Content to be scrolled
Lorem ipsum dolor sit amet consectetur adipisicing elit. <br>
Iure id exercitationem nulla qui repellat laborum vitae, <br>
molestias tempora velit natus. Quas, assumenda nisi. <br>
Quisquam enim qui iure, consequatur velit sit? <br>
Lorem ipsum dolor sit amet consectetur adipisicing elit.<br>
Iure id exercitationem nulla qui repellat laborum vitae, <br>
molestias tempora velit natus. Quas, assumenda nisi. <br>
Quisquam enim qui iure, consequatur velit sit?
</div>
</div>
```
@ -35,50 +42,13 @@ Adds a fading gradient to an overflowing element to better indicate there is mor
background: white;
width: 240px;
height: 200px;
padding: 15px 0;
padding: 15px;
line-height: 1.2;
text-align: center;
}
```
#### Demo
<div class="snippet-demo">
<div class="snippet-demo__overflow-scroll-gradient">
<div class="snippet-demo__overflow-scroll-gradient__scroller">
Content to be scrolled
</div>
</div>
</div>
<style>
.snippet-demo__overflow-scroll-gradient {
position: relative;
}
.snippet-demo__overflow-scroll-gradient::after {
content: '';
background: linear-gradient(rgba(255, 255, 255, 0.001), white);
position: absolute;
width: 240px;
height: 25px;
bottom: 0;
pointer-events: none;
}
.snippet-demo__overflow-scroll-gradient__scroller {
overflow-y: scroll;
background: white;
width: 240px;
height: 200px;
padding: 15px 0;
line-height: 1.2;
text-align: center;
}
</style>
<script>
document.querySelector('.snippet-demo__overflow-scroll-gradient__scroller').innerHTML = 'content '.repeat(100)
</script>
#### Explanation
1. `position: relative` on the parent establishes a Cartesian positioning context for pseudo-elements.