1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <body>
<div class="header">
</div>
<div id="container" class="container">
<div id="page1" class="pages" style="background-color: aqua">
</div>
<div id="page2" class="pages" style="background-color: #3c71b5">
</div>
<div id="page3" class="pages" style="background-color: #2422bf">
</div>
</div>
</body>
|
1
2
3
4
5
6
7
8
9
10
11
| .pages {
height: 100vh;
width: 100%;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.container {
scroll-snap-type: y mandatory;
overflow-y: auto;
}
|
此时F12发现有吸附点，但并没有吸附，原因是直接父容器没有给予高度
实现！！
1
2
3
4
5
6
7
8
9
10
11
12
| .pages {
height: 100vh;
width: 100%;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.container {
scroll-snap-type: y mandatory;
overflow-y: auto;
height: 100vh;
}
|
