vue页面滚动监听组件（vue-scroll-snap）

 website 下载

介绍

vue-scroll-snap是Vue.js的一个组件，用于创建具有监听滚动功能的单页滚动网站或单页Web应用程序。在滚动页面时，页面将自动监听到下一个或上一个页面部分。

使用方法

1.导入并注册组件。

import VueScrollSnap from "vue-scroll-snap";
export default {
  components: {VueScrollSnap},
};

2.在您的应用程序模板中创建组件，然后将页面部分插入文档中。

<template>
  <vue-scroll-snap>
    <div class="item"></div>
    <div class="item"></div>
    ...
  </vue-scroll-snap>
</template>

3.启用全屏页面滚动。

<template>
  <vue-scroll-snap :fullscreen="true">
    <div class="item"></div>
    <div class="item"></div>
    ...
  </vue-scroll-snap>
</template>

4.启用水平页面滚动。

<template>
  <vue-scroll-snap :horizontal="true">
    <div class="item"></div>
    <div class="item"></div>
    ...
  </vue-scroll-snap>
</template>