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

fix: overflow on 320px screens

Browse Source
This commit is contained in:
atomiks
2018-03-03 19:03:38 +10:00
parent 7250a9adfa
commit 7f2638cd38
4 changed files with 34 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
docs/3df57813b7ec2de885ea6075ff46ed46.js
View File

File diff suppressed because one or more lines are too long

10
docs/index.html
View File

File diff suppressed because one or more lines are too long

16
index.html
View File

@ -1025,7 +1025,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
content: '';
position: absolute;
bottom: 0;
width: 300px;
width: 240px;
height: 25px;
background: linear-gradient(
rgba(255, 255, 255, 0.001),
@ -1036,8 +1036,8 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
.overflow-scroll-gradient__scroller {
overflow-y: scroll;
background: white;
width: 300px;
height: 250px;
width: 240px;
height: 200px;
padding: 15px 0;
line-height: 1.2;
text-align: center;
@ -1059,7 +1059,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
content: '';
background: linear-gradient(rgba(255, 255, 255, 0.001), white);
position: absolute;
width: 300px;
width: 240px;
height: 25px;
bottom: 0;
pointer-events: none;
@ -1067,15 +1067,15 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
.snippet-demo__overflow-scroll-gradient__scroller {
overflow-y: scroll;
background: white;
width: 300px;
height: 250px;
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(200)
document.querySelector('.snippet-demo__overflow-scroll-gradient__scroller').innerHTML = 'content '.repeat(100)
</script>
<h4>Explanation</h4>
<ol>
@ -1083,7 +1083,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
<li><code>::after</code> defines a pseudo element.</li>
<li><code>background-image: linear-gradient(...)</code> adds a linear gradient that fades from transparent to white (top to bottom).</li>
<li><code>position: absolute</code> takes the pseudo element out of the flow of the document and positions it in relation to the parent.</li>
<li><code>width: 300px</code> matches the size of the scrolling element (which is a child of the parent that has the pseudo element).</li>
<li><code>width: 240px</code> matches the size of the scrolling element (which is a child of the parent that has the pseudo element).</li>
<li><code>height: 25px</code> is the height of the fading gradient pseudo-element, which should be kept relatively small.</li>
<li><code>bottom: 0</code> positions the pseudo-element at the bottom of the parent.</li>
<li><code>pointer-events: none</code> specifies that the pseudo-element cannot be a target of mouse events, allowing text behind it to still be selectable/interactive.</li>

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

@ -22,7 +22,7 @@ Adds a fading gradient to an overflowing element to better indicate there is mor
content: '';
position: absolute;
bottom: 0;
width: 300px;
width: 240px;
height: 25px;
background: linear-gradient(
rgba(255, 255, 255, 0.001),
@ -33,8 +33,8 @@ Adds a fading gradient to an overflowing element to better indicate there is mor
.overflow-scroll-gradient__scroller {
overflow-y: scroll;
background: white;
width: 300px;
height: 250px;
width: 240px;
height: 200px;
padding: 15px 0;
line-height: 1.2;
text-align: center;
@ -59,7 +59,7 @@ Adds a fading gradient to an overflowing element to better indicate there is mor
content: '';
background: linear-gradient(rgba(255, 255, 255, 0.001), white);
position: absolute;
width: 300px;
width: 240px;
height: 25px;
bottom: 0;
pointer-events: none;
@ -67,8 +67,8 @@ Adds a fading gradient to an overflowing element to better indicate there is mor
.snippet-demo__overflow-scroll-gradient__scroller {
overflow-y: scroll;
background: white;
width: 300px;
height: 250px;
width: 240px;
height: 200px;
padding: 15px 0;
line-height: 1.2;
text-align: center;
@ -76,7 +76,7 @@ Adds a fading gradient to an overflowing element to better indicate there is mor
</style>
<script>
document.querySelector('.snippet-demo__overflow-scroll-gradient__scroller').innerHTML = 'content '.repeat(200)
document.querySelector('.snippet-demo__overflow-scroll-gradient__scroller').innerHTML = 'content '.repeat(100)
</script>
#### Explanation
@ -86,7 +86,7 @@ document.querySelector('.snippet-demo__overflow-scroll-gradient__scroller').inne
3. `background-image: linear-gradient(...)` adds a linear gradient that fades from transparent to white
(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.
5. `width: 300px` matches the size of the scrolling element (which is a child of the parent that has
5. `width: 240px` matches the size of the scrolling element (which is a child of the parent that has
the pseudo element).
6. `height: 25px` is the height of the fading gradient pseudo-element, which should be kept relatively small.
7. `bottom: 0` positions the pseudo-element at the bottom of the parent.