Skip to content

Commit 4cf4b2f

Browse files
estelleestelle
committed
more features
1 parent 9e7dc8c commit 4cf4b2f

File tree

1 file changed

+72
-44
lines changed

1 file changed

+72
-44
lines changed

‎modules/scroll_snap.html

+72-44
Original file line numberDiff line numberDiff line change
@@ -6,29 +6,39 @@
66
<title>Scroll snap</title>
77
<style>
88
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+
*/
919
}
1020
ul {
1121
overflow: auto;
1222
scroll-snap-type: both mandatory;
1323
overscroll-behavior-x: contain;
1424
}
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+
}
1533

1634
@layer pageSetup {
1735
article {
1836
display: flex;
19-
gap: 1vw;
37+
gap: 2vw;
2038
}
2139
div {
2240
flex: 1;
2341
}
24-
input {
25-
vertical-align: bottom;
26-
}
27-
p {
28-
font-family: monospace;
29-
}
30-
}
31-
@layer exampleSetup {
3242
ul {
3343
display: grid;
3444
gap: 6.25vw;
@@ -66,9 +76,16 @@
6676
li::after {
6777
content: counter(items);
6878
}
79+
input {
80+
vertical-align: bottom;
81+
}
82+
p {
83+
font-family: monospace;
84+
}
6985
}
7086
</style>
7187
</head>
88+
7289
<body>
7390
<article>
7491
<ul>
@@ -121,65 +138,76 @@
121138
<li></li>
122139
</ul>
123140
<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" /> Stop on all boxes</label>
171+
</p>
172+
</fieldset>
173+
124174
<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>
175+
<label><input type="checkbox" id="snap" /> disable snapping</label>
157176
</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>
158183
</div>
159184
</article>
185+
160186
<script>
161187
const positions = ["start", "center", "end"];
162188
const inlineDirection = document.getElementById("inline");
163189
const blockDirection = document.getElementById("block");
164190
const stop = document.getElementById("stop");
191+
const snap = document.getElementById("snap");
192+
const all = document.querySelector("article");
165193
const rules = document.styleSheets[0].cssRules;
166194

167195
inlineDirection.addEventListener("change", () => {
168196
setSSA();
169197
});
170-
171198
blockDirection.addEventListener("change", () => {
172199
setSSA();
173200
});
174-
175201
stop.addEventListener("change", () => {
176202
setSST();
177203
});
178-
179204
window.addEventListener("load", () => {
180205
setSST();
181206
setSSA();
182207
});
208+
snap.addEventListener("change", () => {
209+
all.classList.toggle("snapDisabled");
210+
});
183211

184212
function setSSA() {
185213
rules[0].style.scrollSnapAlign = `${positions[blockDirection.value]} ${

0 commit comments

Comments
 (0)