前言
全屏滚动的效果在一些地方也经常使用，看效果图，接下来直接上代码
代码实现
主要是scroll-snap-type和scroll-snap-align属性
scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]
- 在父元素中设置
- 前面通常用的都是 x或者y，表示是在x轴还是y轴
- mandatory: 通常在 CSS 代码中我们都会使用这个，mandatory 的英文意思是强制性的，表示滚动结束后，滚动停止点一定会强制停在我们指定的地方
- proximity: 英文意思是接近、临近、大约，在这个属性中的意思是滚动结束后，滚动停止点可能就是滚动停止的地方，也可能会再进行额外移动，停在我们指定的地方
scroll-snap-align: start | center | end;
- 控制将要聚焦的当前滚动子元素在滚动方向上相对于父容器的对齐方式
<template>
<section v-for="(data, ind) in title" :key="ind">
<h1>{{ data }}</h1>
</section>
</template>
<script lang="ts">
import { ref } from "vue";
export default {
setup() {
let title = ref<number[]>([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
return {
title,
};
},
};
</script>
<style>
html {
scroll-snap-type: y mandatory;
}
section {
block-size: 100vh;
scroll-snap-align: center;
display: flex;
justify-content: center;
align-items: center;
}
</style>
结语
想要更清楚了解的可以看这篇
