Skip to content

Commit 5ba3951

Browse files
estelleestelle
committed
New example: scroll snap
1 parent 55f2950 commit 5ba3951

File tree

1 file changed

+162
-0
lines changed

1 file changed

+162
-0
lines changed

‎modules/scroll_snap.html

+162
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
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+
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>
62+
</head>
63+
<body>
64+
<article>
65+
<ul>
66+
<li></li>
67+
<li></li>
68+
<li></li>
69+
<li></li>
70+
<li></li>
71+
<li></li>
72+
<li></li>
73+
<li></li>
74+
<li></li>
75+
<li></li>
76+
<li></li>
77+
<li></li>
78+
<li></li>
79+
<li></li>
80+
<li></li>
81+
<li></li>
82+
<li></li>
83+
<li></li>
84+
<li></li>
85+
<li></li>
86+
<li></li>
87+
<li></li>
88+
<li></li>
89+
<li></li>
90+
<li></li>
91+
<li></li>
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+
</ul>
114+
<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>
123+
</div>
124+
</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;
131+
132+
inlineDirection.addEventListener("change", () => {
133+
setSSA();
134+
});
135+
136+
blockDirection.addEventListener("change", () => {
137+
setSSA();
138+
});
139+
140+
stop.addEventListener("change", () => {
141+
setSST();
142+
});
143+
144+
window.addEventListener("load", () => {
145+
setSST();
146+
setSSA();
147+
});
148+
149+
function setSSA() {
150+
rules[0].style.scrollSnapAlign = `${positions[blockDirection.value]} ${positions[inlineDirection.value]}`;
151+
}
152+
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>
161+
</body>
162+
</html>

0 commit comments

Comments
 (0)