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

Update overflow-scroll-gradient.md

Browse Source
This commit is contained in:
atomiks
2018-02-28 16:46:04 +10:00
committed by GitHub
parent 528be97e5b
commit 233a149095
1 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -78,15 +78,16 @@ document.querySelector('.snippet-demo__overflow-scroll-gradient__scroller').inne
#### Explanation #### Explanation
1. `position: relative` on the parent establishes a Cartesian positioning context for psuedo elements. 1. `position: relative` on the parent establishes a Cartesian positioning context for psuedo-elements.
2. `::after` defines a pseudo element. 2. `::after` defines a pseudo element.
3. `background-image: linear-gradient(...)` adds a linear gradient that fades from transparent to white 3. `background-image: linear-gradient(...)` adds a linear gradient that fades from transparent to white
(top to bottom). (top to bottom).
4. `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent. 4. `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent.
5. `width: 300px` matches the size of the scrolling element (which is a child of the parent that has 5. `width: 300px` matches the size of the scrolling element (which is a child of the parent that has
the pseudo element). the pseudo element).
6. `height: 25px` is the height of the fading gradient psuedo element, which should be kept relatively small. 6. `height: 25px` is the height of the fading gradient psuedo-element, which should be kept relatively small.
7. `bottom: 0` positions the pseudo element at the bottom of the parent. 7. `bottom: 0` positions the pseudo-element at the bottom of the parent.
8. `pointer-events: none` specifies that the psuedo-element cannot be a target of mouse events, allowing text behind it to still be selectable/interactive.
#### Browser support #### Browser support