一个Vue组件，可轻松设置滚动驱动的交互（又称滚动讲演）。 在引擎盖下使用  Scrollama。

安装和下载：

# NPM
$ npm install vue-scrollama intersection-observer --save

基本用法

直接放置在Scrollama组件内部的任何元素都将被视为步骤。随着用户滚动，将触发并发出事件，您可以根据需要进行处理：

• step-enter：当步进元素的顶部或底部边缘进入偏移阈值时
• step-exit：当步进元素的顶部或底部边缘退出偏移阈值时
• step-progress：不断触发通过阈值已取得的进度（0-1）

这是一个简单的示例，其中三个<div>元素作为步骤和一个step-enter事件

<template>
  <Scrollama @step-enter="stepEnterHandler">
    <div class="step1" data-step="a">...</div> // 像.step1这样的类有助于调整步骤的样式和维度
    <div class="step2" data-step="b">...</div> // data-*属性有助于存储处理程序中使用的指令
    <div class="step3" data-step="c">...</div>
  </Scrollama>
</template>

<script>
import 'intersection-observer' // 跨浏览器支持
import Scrollama from 'vue-scrollama'

export default {
  components: {
    Scrollama
  },
  methods: {
    stepEnterHandler ({element, index, direction}) {
      // 按要求处理台阶事件
      console.log(element, index, direction)
    }
  }
}

<style src="vue-scrollama/dist/vue-scrollama.css"></style>
<style>
/* 你的风格 */
</style>

粘性图形

要添加粘性图形元素（示例），请将其放入名称为“ graphic”的插槽中。

// 类有助于调整图形的样式和尺寸
<template>
  <Scrollama @step-enter="stepEnterHandler">
    <div slot="graphic" class="graphic">...</div> 
    <div class="step1" data-step="a">...</div>
    <div class="step2" data-step="b">...</div>
    <div class="step3" data-step="c">...</div>
  </Scrollama>
</template>

变更日志：

04/21/2021

• v1.2.0

10/18/2019

• v1.1.9