Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 9f138af

Browse files
committed
Add 41 css scroll snap
1 parent a24bb2b commit 9f138af

File tree

9 files changed

+310
-3
lines changed

9 files changed

+310
-3
lines changed

‎41-css-scroll-snap/base.css‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
font-family: sans-serif;
5+
}
6+
7+
/* 装饰性样式 */
8+
section {
9+
display: grid;
10+
place-items: center;
11+
font-size: 2em;
12+
}
13+
14+
section:nth-child(1) {
15+
background: rgb(229, 213, 255);
16+
}
17+
18+
section:nth-child(2) {
19+
background: rgb(255, 219, 206);
20+
}
21+
22+
section:nth-child(3) {
23+
background: rgb(242, 240, 186);
24+
}
25+
26+
section:nth-child(4) {
27+
background: rgb(196, 244, 175);
28+
}
29+
30+
h1 {
31+
box-shadow: 0 0 24px hsl(0, 0%, 0%, 0.2);
32+
display: grid;
33+
place-items: center;
34+
font-size: 2em;
35+
background: white;
36+
}
37+
38+
ul {
39+
width: 50%;
40+
list-style: none;
41+
height: 240px;
42+
overflow: scroll;
43+
}
44+
45+
li {
46+
padding: 1em;
47+
text-align: center;
48+
font-size: 2em;
49+
}
50+
51+
li:nth-child(2n) {
52+
background: rgb(229, 213, 255);
53+
}
54+
55+
li:nth-child(2n + 1) {
56+
background: rgb(255, 219, 206);
57+
}
Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="base.css" />
8+
<title>CSS Scroll Snap 近似贴合</title>
9+
<style>
10+
/* 核心样式 */
11+
main {
12+
/* scroll-snap-type: y mandatory; */
13+
scroll-snap-type: y proximity;
14+
/* 需要把滚动条设置到直接父容器,scroll-snap-type 才能生效,默认是在 body 上,现在是 main 上 */
15+
overflow: scroll;
16+
height: 100vh;
17+
}
18+
19+
section {
20+
width: 100vw;
21+
height: 100vh;
22+
scroll-snap-align: end;
23+
}
24+
25+
/* 假如第3个部分非常长 */
26+
section:nth-child(3) {
27+
height: 250vh;
28+
}
29+
</style>
30+
</head>
31+
<body>
32+
<main>
33+
<section>页面内容1</section>
34+
<section>页面内容2</section>
35+
<section>页面内容3</section>
36+
<section>页面内容4</section>
37+
</main>
38+
</body>
39+
</html>
Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="base.css" />
8+
<title>CSS Scroll Snap 水平贴合</title>
9+
<style>
10+
/* 核心样式 */
11+
main {
12+
display: flex;
13+
scroll-snap-type: x mandatory;
14+
overflow: scroll;
15+
height: 100vh;
16+
width: 100vw;
17+
}
18+
19+
section {
20+
width: 100vw;
21+
height: 100vh;
22+
scroll-snap-align: start;
23+
flex-shrink: 0;
24+
}
25+
</style>
26+
</head>
27+
<body>
28+
<main>
29+
<section>页面内容1</section>
30+
<section>页面内容2</section>
31+
<section>页面内容3</section>
32+
<section>页面内容4</section>
33+
</main>
34+
</body>
35+
</html>
Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="base.css" />
8+
<title>CSS Scroll Snap 贴合间距</title>
9+
<style>
10+
/* 核心样式 */
11+
h1 {
12+
height: 80px;
13+
position: sticky;
14+
top: 0;
15+
}
16+
main {
17+
scroll-snap-type: y mandatory;
18+
scroll-padding: 80px;
19+
overflow: scroll;
20+
height: 100vh;
21+
}
22+
section {
23+
width: 100vw;
24+
height: 100vh;
25+
scroll-snap-align: start;
26+
}
27+
</style>
28+
</head>
29+
<body>
30+
<main>
31+
<h1>H1标题</h1>
32+
<section>页面内容1</section>
33+
<section>页面内容2</section>
34+
<section>页面内容3</section>
35+
<section>页面内容4</section>
36+
</main>
37+
</body>
38+
</html>
Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="base.css" />
8+
<title>CSS Scroll Snap 垂直</title>
9+
<style>
10+
/* 核心样式 */
11+
main {
12+
scroll-snap-type: y mandatory;
13+
/* 需要把滚动条设置到直接父容器,
14+
scroll-snap-type 才能生效,
15+
默认是在 body 上,现在是 main 上 */
16+
overflow: scroll;
17+
height: 100vh;
18+
}
19+
section {
20+
width: 100vw;
21+
height: 150vh;
22+
scroll-snap-align: center;
23+
}
24+
</style>
25+
</head>
26+
<body>
27+
<main>
28+
<section>页面内容1</section>
29+
<section>页面内容2</section>
30+
<section>页面内容3</section>
31+
<section>页面内容4</section>
32+
</main>
33+
</body>
34+
</html>

‎41-css-scroll-snap/index.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
font-family: sans-serif;
12+
}
13+
main {
14+
width: 100vw;
15+
height: 100vh;
16+
max-width: 100%;
17+
display: grid;
18+
place-items: center;
19+
background-color: hsl(0deg, 0%, 5%);
20+
}
21+
22+
ul {
23+
list-style: none;
24+
}
25+
26+
li {
27+
padding: 0.6em;
28+
}
29+
30+
a {
31+
color: white;
32+
font-size: 2em;
33+
}
34+
</style>
35+
<title>CSS 滚动贴合</title>
36+
</head>
37+
<body>
38+
<main>
39+
<ul>
40+
<li>
41+
<a href="./fullscreen-snap-y.html">垂直贴合</a>
42+
</li>
43+
<li><a href="./fullscreen-snap-x.html">水平贴合</a></li>
44+
<li><a href="./fullscreen-snap-proximity.html">近似贴合</a></li>
45+
<li><a href="./fullscreen-snap-y-padding.html">贴合间距</a></li>
46+
<li><a href="./list-scroll-y.html">Ul 列表贴合</a></li>
47+
</ul>
48+
</main>
49+
</body>
50+
</html>
Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="base.css" />
8+
<title>CSS Scroll Snap Ul 列表贴合</title>
9+
<style>
10+
* {
11+
margin: 0;
12+
padding: 0;
13+
font-family: sans-serif;
14+
}
15+
16+
main {
17+
width: 100vw;
18+
height: 100vh;
19+
display: grid;
20+
place-items: center;
21+
}
22+
23+
/* 核心样式 */
24+
ul {
25+
scroll-snap-type: y mandatory;
26+
}
27+
28+
li {
29+
scroll-snap-align: start;
30+
}
31+
</style>
32+
</head>
33+
<body>
34+
<main>
35+
<ul>
36+
<li>1</li>
37+
<li>2</li>
38+
<li>3</li>
39+
<li>4</li>
40+
<li>5</li>
41+
<li>6</li>
42+
<li>7</li>
43+
<li>8</li>
44+
</ul>
45+
</main>
46+
</body>
47+
</html>

‎index.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
const uis = [{
2-
href: "40-multi-column-layout",
3-
text: "Multi-column 布局",
2+
href: "41-css-scroll-snap",
3+
text: "CSS 滚动贴合",
44
newItem: true
5+
}, {
6+
href: "40-multi-column-layout",
7+
text: "Multi-column 布局"
58
}, {
69
href: "39-web-animations",
710
text: "Web Animations API"

‎src/index.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
const uis = [
2+
{
3+
href: "41-css-scroll-snap",
4+
text: "CSS 滚动贴合",
5+
newItem: true,
6+
},
27
{
38
href: "40-multi-column-layout",
49
text: "Multi-column 布局",
5-
newItem: true,
610
},
711
{
812
href: "39-web-animations",

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /