Skip to content

Commit d9894e8

Browse files
teoli2003teoli2003
authored
Merge pull request mdn#136 from estelle/overflow
CSS Modules example: overflow
2 parents ac92956 + 739740b commit d9894e8

File tree

1 file changed

+194
-0
lines changed

1 file changed

+194
-0
lines changed

‎modules/overflow.html

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
<!DOCTYPE html>
2+
<html lang="en-us">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
<title>Overflow</title>
7+
<style>
8+
article {
9+
display: flex;
10+
gap: 1em;
11+
}
12+
13+
label {
14+
display: block;
15+
white-space: nowrap;
16+
}
17+
18+
pre {
19+
border: 2px dashed crimson;
20+
height: 150px;
21+
width: 20em;
22+
margin-bottom: 3em;
23+
overflow-clip-margin: 1em;
24+
text-align: center;
25+
}
26+
27+
.wide {
28+
width: 40em;
29+
}
30+
31+
::before {
32+
font-weight: bold;
33+
color: white;
34+
background: crimson;
35+
display: inline-block;
36+
min-width: 50%;
37+
padding: 3px 5px;
38+
box-sizing: border-box;
39+
}
40+
41+
.hidden {
42+
overflow: hidden hidden;
43+
}
44+
.hidden::before {
45+
content: "hidden: ";
46+
}
47+
48+
.clip {
49+
overflow: clip clip;
50+
}
51+
.clip::before {
52+
content: "clip: ";
53+
}
54+
55+
.scroll {
56+
overflow: scroll scroll;
57+
}
58+
.scroll::before {
59+
content: "scroll: ";
60+
}
61+
62+
.auto {
63+
overflow: auto auto;
64+
}
65+
.auto::before {
66+
content: "auto: ";
67+
}
68+
69+
.overlay {
70+
overflow: clip clip;
71+
overflow: overlay overlay;
72+
}
73+
.overlay::before {
74+
content: "overlay (or clip if not supported): ";
75+
}
76+
77+
.visible {
78+
overflow: visible visible;
79+
}
80+
.visible::before {
81+
content: "visible: ";
82+
}
83+
84+
article:not(:has(pre.clip)) > fieldset > label:nth-of-type(2),
85+
article:not(:has(pre.hidden, pre.scroll, pre.auto, pre.overlay))
86+
fieldset
87+
fieldset {
88+
opacity: 20%;
89+
pointer-events: none;
90+
}
91+
</style>
92+
</head>
93+
<body>
94+
<article>
95+
<fieldset>
96+
<legend>Select options:</legend>
97+
<label
98+
><code>overflow</code>:
99+
<select id="overflowValue">
100+
<option>hidden</option>
101+
<option>clip</option>
102+
<option>scroll</option>
103+
<option>auto</option>
104+
<option selected>visible</option>
105+
<option>overlay</option>
106+
</select>
107+
</label>
108+
<label>
109+
<code>overflow-clip-margin</code>:
110+
<input type="number" id="ocm" value="1" min="0" max="10" size="2" />
111+
<code>em</code>
112+
</label>
113+
<label
114+
><input type="checkbox" id="wide" /> <code>width</code>:
115+
<code>20em</code> or <code>40em</code></label
116+
>
117+
<fieldset>
118+
<legend>Scroll programatically:</legend>
119+
<label
120+
>ScrollLeft:
121+
<input type="range" min="0" max="100" value="0" id="scrollL"
122+
/></label>
123+
<label
124+
>ScrollTop:
125+
<input type="range" min="0" max="100" value="0" id="scrollT"
126+
/></label>
127+
</fieldset>
128+
</fieldset>
129+
<pre class="visible">&nbsp;
130+
Oh, Rubber Duckie, you're the one
131+
You make bath time lots of fun
132+
Rubber Duckie, I'm awfully fond of you
133+
134+
Rubber Duckie, joy of joys
135+
When I squeeze you, you make noise
136+
Rubber Duckie, you're my very best friend, it's true
137+
138+
Oh, every day when I make my way to the tubby
139+
I find a little fella who's cute and yellow and chubby
140+
Rub-a-dub-dubby
141+
142+
<a href="#">Rubber Duckie</a>, you're so fine
143+
And I'm lucky that you're mine
144+
Rubber Duckie, I'm awfully fond of you
145+
</pre>
146+
</article>
147+
<script>
148+
const pre = document.querySelector("pre");
149+
const val = document.getElementById("overflowValue");
150+
const check = document.getElementById("wide");
151+
const ocm = document.getElementById("ocm");
152+
const scrollL = document.getElementById("scrollL");
153+
const scrollT = document.getElementById("scrollT");
154+
155+
val.addEventListener("change", () => {
156+
if (pre.classList.contains("wide")) {
157+
pre.className = `wide ${val.value}`;
158+
} else {
159+
pre.className = `${val.value}`;
160+
}
161+
scrollExample();
162+
clipMargin();
163+
});
164+
165+
wide.addEventListener("change", () => {
166+
pre.classList.toggle("wide");
167+
scrollExample();
168+
});
169+
170+
ocm.addEventListener("change", () => {
171+
clipMargin();
172+
});
173+
174+
scrollL.addEventListener("change", () => {
175+
scrollExample();
176+
});
177+
scrollT.addEventListener("change", () => {
178+
scrollExample();
179+
});
180+
181+
function scrollExample() {
182+
pre.scrollTo({
183+
top: scrollT.value,
184+
left: scrollL.value * 2,
185+
behavior: "smooth",
186+
});
187+
}
188+
189+
function clipMargin() {
190+
pre.style.overflowClipMargin = `${ocm.value}em`;
191+
}
192+
</script>
193+
</body>
194+
</html>

0 commit comments

Comments
 (0)