Skip to content

Commit 8efb121

Browse files
rachelandrewrachelandrew
committed
Scroll Snap examples for guides
1 parent 5c294a3 commit 8efb121

File tree

7 files changed

+698
-0
lines changed

7 files changed

+698
-0
lines changed

‎scroll-snap/align.html

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS Scroll Snap - scroll-snap-align</title>
7+
<link rel="stylesheet" href="../css-cookbook/styles.css">
8+
<style>
9+
.scroller {
10+
border: 4px solid #333;
11+
width: 300px;
12+
}
13+
14+
.scroller section {
15+
min-height: 100%;
16+
padding: 10px;
17+
}
18+
19+
.scroller section:nth-child(odd) {
20+
background-color: #ccc;
21+
}
22+
</style>
23+
24+
<style class="editable">
25+
.scroller {
26+
height: 200px;
27+
overflow-y: scroll;
28+
scroll-snap-type: y mandatory;
29+
}
30+
31+
.scroller section {
32+
scroll-snap-align: start;
33+
}
34+
</style>
35+
</head>
36+
37+
<body>
38+
<section class="preview">
39+
<article class="scroller">
40+
<section>
41+
<h2>Section one</h2>
42+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water
43+
spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert
44+
raisin horseradish spinach carrot soko.</p>
45+
46+
<p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard.</p>
47+
48+
</section>
49+
<section>
50+
<h2>Section two</h2>
51+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water
52+
spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert
53+
raisin horseradish spinach carrot soko. </p>
54+
<p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard.</p>
55+
56+
57+
</section>
58+
<section>
59+
<h2>Section three</h2>
60+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water
61+
spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert
62+
raisin horseradish spinach carrot soko.</p>
63+
<p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard.</p>
64+
65+
66+
</section>
67+
</article>
68+
</section>
69+
70+
<textarea class="playable playable-css" style="height: 170px;">.scroller {
71+
height: 200px;
72+
overflow-y: scroll;
73+
scroll-snap-type: y mandatory;
74+
}
75+
76+
.scroller section {
77+
scroll-snap-align: start;
78+
}</textarea>
79+
80+
<textarea class="playable playable-html" style="height: 230px;">
81+
<article class="scroller">
82+
<section>
83+
<h2>Section one</h2>
84+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.</p>
85+
86+
<p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard.</p>
87+
</section>
88+
<section>
89+
<h2>Section two</h2>
90+
91+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.</p>
92+
93+
<p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard.</p>
94+
</section>
95+
<section>
96+
<h2>Section three</h2>
97+
98+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.</p>
99+
100+
<p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard.</p>
101+
</section>
102+
</article>
103+
</textarea>
104+
105+
106+
<div class="playable-buttons">
107+
<input id="reset" type="button" value="Reset">
108+
</div>
109+
</body>
110+
<script src="../css-cookbook/playable.js"></script>
111+
112+
</html>

‎scroll-snap/mandatory-proximity.html

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS Scroll Snap - Mandatory or Proximity</title>
7+
<link rel="stylesheet" href="../css-cookbook/styles.css">
8+
<style>
9+
.scroller {
10+
border: 4px solid #333;
11+
width: 300px;
12+
}
13+
14+
.scroller section {
15+
min-height: 100%;
16+
padding: 10px;
17+
}
18+
19+
.scroller section:nth-child(odd) {
20+
background-color: #ccc;
21+
}
22+
</style>
23+
24+
<style class="editable">
25+
.scroller {
26+
height: 300px;
27+
overflow-y: scroll;
28+
scroll-snap-type: y mandatory;
29+
}
30+
31+
.scroller section {
32+
scroll-snap-align: start;
33+
}
34+
</style>
35+
</head>
36+
37+
<body>
38+
<section class="preview">
39+
<article class="scroller">
40+
<section>
41+
<h2>Section one</h2>
42+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water
43+
spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert
44+
raisin horseradish spinach carrot soko.</p>
45+
46+
</section>
47+
<section>
48+
<h2>Section two</h2>
49+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water
50+
spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert
51+
raisin horseradish spinach carrot soko. </p>
52+
53+
54+
</section>
55+
<section>
56+
<h2>Section three</h2>
57+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water
58+
spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert
59+
raisin horseradish spinach carrot soko.</p>
60+
61+
62+
</section>
63+
</article>
64+
</section>
65+
66+
<textarea class="playable playable-css" style="height: 170px;">.scroller {
67+
height: 300px;
68+
overflow-y: scroll;
69+
scroll-snap-type: y mandatory;
70+
}
71+
72+
.scroller section {
73+
scroll-snap-align: start;
74+
}</textarea>
75+
76+
<textarea class="playable playable-html" style="height: 230px;">
77+
<article class="scroller">
78+
<section>
79+
<h2>Section one</h2>
80+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.</p>
81+
</section>
82+
<section>
83+
<h2>Section two</h2>
84+
85+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.</p>
86+
</section>
87+
<section>
88+
<h2>Section three</h2>
89+
90+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.</p>
91+
</section>
92+
</article>
93+
</textarea>
94+
95+
96+
<div class="playable-buttons">
97+
<input id="reset" type="button" value="Reset">
98+
</div>
99+
</body>
100+
<script src="../css-cookbook/playable.js"></script>
101+
102+
</html>

‎scroll-snap/mandatory-y-old-spec.html

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS Scroll Snap - old specification</title>
7+
<link rel="stylesheet" href="../css-cookbook/styles.css">
8+
<style>
9+
.scroller {
10+
border: 4px solid #333;
11+
width: 300px;
12+
}
13+
14+
.scroller section {
15+
min-height: 100%;
16+
padding: 10px;
17+
}
18+
19+
.scroller section:nth-child(odd) {
20+
background-color: #ccc;
21+
}
22+
</style>
23+
24+
<style class="editable">
25+
.scroller {
26+
height: 300px;
27+
overflow-y: scroll;
28+
scroll-snap-points-y: repeat(320px);
29+
scroll-snap-destination: 0 0;
30+
scroll-snap-type: y mandatory;
31+
scroll-snap-type: mandatory;
32+
}
33+
34+
.scroller section {
35+
scroll-snap-align: start;
36+
}
37+
</style>
38+
</head>
39+
40+
<body>
41+
<section class="preview">
42+
<article class="scroller">
43+
<section>
44+
<h2>Section one</h2>
45+
46+
47+
</section>
48+
<section>
49+
<h2>Section two</h2>
50+
51+
52+
53+
</section>
54+
<section>
55+
<h2>Section three</h2>
56+
57+
58+
59+
</section>
60+
</article>
61+
</section>
62+
63+
<textarea class="playable playable-css" style="height: 170px;">.scroller {
64+
height: 300px;
65+
overflow-y: scroll;
66+
scroll-snap-points-y: repeat(320px);
67+
scroll-snap-destination: 0 0;
68+
scroll-snap-type: y mandatory;
69+
scroll-snap-type: mandatory;
70+
}
71+
72+
.scroller section {
73+
scroll-snap-align: start;
74+
}</textarea>
75+
76+
<textarea class="playable playable-html" style="height: 230px;">
77+
<article class="scroller">
78+
<section>
79+
<h2>Section one</h2>
80+
</section>
81+
<section>
82+
<h2>Section two</h2>
83+
</section>
84+
<section>
85+
<h2>Section three</h2>
86+
</section>
87+
</article>
88+
</textarea>
89+
90+
91+
<div class="playable-buttons">
92+
<input id="reset" type="button" value="Reset">
93+
</div>
94+
</body>
95+
<script src="../css-cookbook/playable.js"></script>
96+
97+
</html>

0 commit comments

Comments
 (0)