Skip to content

Commit bf39396

Browse files
estelleestelle
authored
Merge pull request mdn#137 from estelle/scrollsnap
New example: Scroll snap
2 parents 55f2950 + 45a6df6 commit bf39396

File tree

1 file changed

+227
-0
lines changed

1 file changed

+227
-0
lines changed

‎modules/scroll_snap.html

+227
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
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>Scroll snap</title>
7+
<style>
8+
li {
9+
/*
10+
starts with:
11+
scroll-snap-align: center center;
12+
scroll-snap-stop: normal (defaults);
13+
14+
CSS gets changed with JavaScript when you change the controls.
15+
the following can be set:
16+
scroll-snap-stop: always | normal;
17+
scroll-snap-align: start | center | end {2}
18+
*/
19+
}
20+
ul {
21+
overflow: auto;
22+
scroll-snap-type: both mandatory;
23+
overscroll-behavior-x: contain;
24+
}
25+
article.snapDisabled fieldset {
26+
opacity: 20%;
27+
pointer-events: none;
28+
}
29+
article.snapDisabled ul {
30+
scroll-snap-type: initial;
31+
overscroll-behavior-x: initial;
32+
}
33+
34+
@layer pageSetup {
35+
article {
36+
display: flex;
37+
gap: 2vw;
38+
}
39+
div {
40+
flex: 1;
41+
}
42+
ul {
43+
display: grid;
44+
gap: 6.25vw;
45+
padding: 12.5vw;
46+
box-sizing: border-box;
47+
border: 1px solid;
48+
grid-template-columns: repeat(5, 1fr);
49+
background: conic-gradient(
50+
at bottom left,
51+
red 0deg,
52+
yellow 15deg,
53+
green 30deg,
54+
blue 45deg,
55+
purple 60deg,
56+
magenta 75deg
57+
);
58+
background-attachment: local;
59+
margin: auto;
60+
width: 20vw;
61+
height: 20vw;
62+
}
63+
li {
64+
scroll-snap-align: center;
65+
height: 12.5vw;
66+
width: 12.5vw;
67+
outline: 3px inset;
68+
list-style-type: none;
69+
background: white;
70+
font-family: monospace;
71+
font-size: 3rem;
72+
line-height: 12vw;
73+
text-align: center;
74+
counter-increment: items 1;
75+
}
76+
li::after {
77+
content: counter(items);
78+
}
79+
input {
80+
vertical-align: bottom;
81+
}
82+
p {
83+
font-family: monospace;
84+
}
85+
}
86+
</style>
87+
</head>
88+
89+
<body>
90+
<article>
91+
<ul>
92+
<li></li>
93+
<li></li>
94+
<li></li>
95+
<li></li>
96+
<li></li>
97+
<li></li>
98+
<li></li>
99+
<li></li>
100+
<li></li>
101+
<li></li>
102+
<li></li>
103+
<li></li>
104+
<li></li>
105+
<li></li>
106+
<li></li>
107+
<li></li>
108+
<li></li>
109+
<li></li>
110+
<li></li>
111+
<li></li>
112+
<li></li>
113+
<li></li>
114+
<li></li>
115+
<li></li>
116+
<li></li>
117+
<li></li>
118+
<li></li>
119+
<li></li>
120+
<li></li>
121+
<li></li>
122+
<li></li>
123+
<li></li>
124+
<li></li>
125+
<li></li>
126+
<li></li>
127+
<li></li>
128+
<li></li>
129+
<li></li>
130+
<li></li>
131+
<li></li>
132+
<li></li>
133+
<li></li>
134+
<li></li>
135+
<li></li>
136+
<li></li>
137+
<li></li>
138+
<li></li>
139+
</ul>
140+
<div>
141+
<fieldset>
142+
<legend>Change the options</legend>
143+
<p>
144+
<label
145+
><input
146+
type="range"
147+
min="0"
148+
max="2"
149+
value="1"
150+
list="places"
151+
id="block"
152+
/>
153+
block position</label
154+
>
155+
</p>
156+
<p>
157+
<label
158+
><input
159+
type="range"
160+
min="0"
161+
max="2"
162+
value="1"
163+
list="places"
164+
id="inline"
165+
/>
166+
inline position</label
167+
>
168+
</p>
169+
<p>
170+
<label><input type="checkbox" id="stop" /> Prevent scrolling past boxes</label>
171+
</p>
172+
</fieldset>
173+
174+
<p>
175+
<label><input type="checkbox" id="snap" /> disable snapping</label>
176+
</p>
177+
178+
<datalist id="places">
179+
<option value="0">start</option>
180+
<option value="1">center</option>
181+
<option value="2">end</option>
182+
</datalist>
183+
</div>
184+
</article>
185+
186+
<script>
187+
const positions = ["start", "center", "end"];
188+
const inlineDirection = document.getElementById("inline");
189+
const blockDirection = document.getElementById("block");
190+
const stop = document.getElementById("stop");
191+
const snap = document.getElementById("snap");
192+
const all = document.querySelector("article");
193+
const rules = document.styleSheets[0].cssRules;
194+
195+
inlineDirection.addEventListener("change", () => {
196+
setSSA();
197+
});
198+
blockDirection.addEventListener("change", () => {
199+
setSSA();
200+
});
201+
stop.addEventListener("change", () => {
202+
setSST();
203+
});
204+
window.addEventListener("load", () => {
205+
setSST();
206+
setSSA();
207+
});
208+
snap.addEventListener("change", () => {
209+
all.classList.toggle("snapDisabled");
210+
});
211+
212+
function setSSA() {
213+
rules[0].style.scrollSnapAlign = `${positions[blockDirection.value]} ${
214+
positions[inlineDirection.value]
215+
}`;
216+
}
217+
218+
function setSST() {
219+
if (stop.checked) {
220+
rules[0].style.scrollSnapStop = "always";
221+
} else {
222+
rules[0].style.scrollSnapStop = "normal";
223+
}
224+
}
225+
</script>
226+
</body>
227+
</html>

0 commit comments

Comments
 (0)