Skip to content

Commit 9e7dc8c

Browse files
estelleestelle
committed
New example: scroll snap
1 parent 5ba3951 commit 9e7dc8c

File tree

1 file changed

+130
-93
lines changed

1 file changed

+130
-93
lines changed

‎modules/scroll_snap.html

Lines changed: 130 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -4,61 +4,70 @@
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width" />
66
<title>Scroll snap</title>
7-
<style>
8-
li {}
9-
ul {
10-
overflow: auto;
11-
scroll-snap-type: both mandatory;
12-
overscroll-behavior-x: contain;
13-
}
14-
15-
@layer pageSetup {
16-
article {
17-
display: flex;
18-
gap: 1vw;
19-
}
20-
div {
21-
flex: 1;
22-
}
23-
input {
24-
vertical-align: bottom;
25-
}
26-
p {
27-
font-family: monospace;
28-
}
29-
}
30-
@layer exampleSetup {
31-
ul {
32-
display: grid;
33-
gap: 6.25vw;
34-
padding: 12.5vw;
35-
box-sizing: border-box;
36-
border: 1px solid;
37-
grid-template-columns: repeat( 5, 1fr );
38-
background: conic-gradient(at bottom left, red 0deg, yellow 15deg, green 30deg, blue 45deg, purple 60deg,magenta 75deg);
39-
background-attachment: local;
40-
margin: auto;
41-
width: 20vw;
42-
height: 20vw;
43-
}
44-
li {
45-
scroll-snap-align: center;
46-
height: 12.5vw;
47-
width: 12.5vw;
48-
outline: 3px inset;
49-
list-style-type: none;
50-
background: white;
51-
font-family: monospace;
52-
font-size: 3rem;
53-
line-height: 12vw;
54-
text-align: center;
55-
counter-increment: items 1;
56-
}
57-
li::after {
58-
content: counter(items);
59-
}
60-
}
61-
</style>
7+
<style>
8+
li {
9+
}
10+
ul {
11+
overflow: auto;
12+
scroll-snap-type: both mandatory;
13+
overscroll-behavior-x: contain;
14+
}
15+
16+
@layer pageSetup {
17+
article {
18+
display: flex;
19+
gap: 1vw;
20+
}
21+
div {
22+
flex: 1;
23+
}
24+
input {
25+
vertical-align: bottom;
26+
}
27+
p {
28+
font-family: monospace;
29+
}
30+
}
31+
@layer exampleSetup {
32+
ul {
33+
display: grid;
34+
gap: 6.25vw;
35+
padding: 12.5vw;
36+
box-sizing: border-box;
37+
border: 1px solid;
38+
grid-template-columns: repeat(5, 1fr);
39+
background: conic-gradient(
40+
at bottom left,
41+
red 0deg,
42+
yellow 15deg,
43+
green 30deg,
44+
blue 45deg,
45+
purple 60deg,
46+
magenta 75deg
47+
);
48+
background-attachment: local;
49+
margin: auto;
50+
width: 20vw;
51+
height: 20vw;
52+
}
53+
li {
54+
scroll-snap-align: center;
55+
height: 12.5vw;
56+
width: 12.5vw;
57+
outline: 3px inset;
58+
list-style-type: none;
59+
background: white;
60+
font-family: monospace;
61+
font-size: 3rem;
62+
line-height: 12vw;
63+
text-align: center;
64+
counter-increment: items 1;
65+
}
66+
li::after {
67+
content: counter(items);
68+
}
69+
}
70+
</style>
6271
</head>
6372
<body>
6473
<article>
@@ -112,51 +121,79 @@
112121
<li></li>
113122
</ul>
114123
<div>
115-
<p><label><input type="range" min="0" max="2" value="1" list="places" id="block"> block position</label></p>
116-
<p><label><input type="range" min="0" max="2" value="1" list="places" id="inline"> inline position</label>
117-
<p><label><input type="checkbox" id="stop"> Stop on all boxes</label>
118-
<datalist id="places">
119-
<option value="0">start</option>
120-
<option value="1">center</option>
121-
<option value="2">end</option>
122-
</datalist>
124+
<p>
125+
<label
126+
><input
127+
type="range"
128+
min="0"
129+
max="2"
130+
value="1"
131+
list="places"
132+
id="block"
133+
/>
134+
block position</label
135+
>
136+
</p>
137+
<p>
138+
<label
139+
><input
140+
type="range"
141+
min="0"
142+
max="2"
143+
value="1"
144+
list="places"
145+
id="inline"
146+
/>
147+
inline position</label
148+
>
149+
</p>
150+
<p>
151+
<label><input type="checkbox" id="stop" /> Stop on all boxes</label>
152+
<datalist id="places">
153+
<option value="0">start</option>
154+
<option value="1">center</option>
155+
<option value="2">end</option>
156+
</datalist>
157+
</p>
123158
</div>
124159
</article>
125-
<script>
126-
const positions = ["start", "center", "end"];
127-
const inlineDirection = document.getElementById("inline");
128-
const blockDirection = document.getElementById("block");
129-
const stop = document.getElementById("stop");
130-
const rules = document.styleSheets[0].cssRules;
160+
<script>
161+
const positions = ["start", "center", "end"];
162+
const inlineDirection = document.getElementById("inline");
163+
const blockDirection = document.getElementById("block");
164+
const stop = document.getElementById("stop");
165+
const rules = document.styleSheets[0].cssRules;
131166

132-
inlineDirection.addEventListener("change", () => {
133-
setSSA();
134-
});
167+
inlineDirection.addEventListener("change", () => {
168+
setSSA();
169+
});
135170

136-
blockDirection.addEventListener("change", () => {
137-
setSSA();
138-
});
171+
blockDirection.addEventListener("change", () => {
172+
setSSA();
173+
});
139174

140-
stop.addEventListener("change", () => {
141-
setSST();
142-
});
175+
stop.addEventListener("change", () => {
176+
setSST();
177+
});
143178

144-
window.addEventListener("load", () => {
145-
setSST();
146-
setSSA();
147-
});
179+
window.addEventListener("load", () => {
180+
setSST();
181+
setSSA();
182+
});
148183

149-
function setSSA() {
150-
rules[0].style.scrollSnapAlign = `${positions[blockDirection.value]} ${positions[inlineDirection.value]}`;
151-
}
184+
function setSSA() {
185+
rules[0].style.scrollSnapAlign = `${positions[blockDirection.value]} ${
186+
positions[inlineDirection.value]
187+
}`;
188+
}
152189

153-
function setSST() {
154-
if(stop.checked) {
155-
rules[0].style.scrollSnapStop = "always";
156-
} else {
157-
rules[0].style.scrollSnapStop = "normal";
158-
}
159-
}
160-
</script>
190+
function setSST() {
191+
if (stop.checked) {
192+
rules[0].style.scrollSnapStop = "always";
193+
} else {
194+
rules[0].style.scrollSnapStop = "normal";
195+
}
196+
}
197+
</script>
161198
</body>
162199
</html>

0 commit comments

Comments
 (0)