Vue Scrollama
made with Vuejs

Vue Scrollama是一个可轻松设置滚动驱动的交互的组件。直接放置在Scrollama组件内部的任何元素都将被视为步骤。随着用户滚动，将触发并发出事件，可以对进入，退出或通过视口的元素进行监听。

安装

Npm

npm i vue-scrollama intersection-observer

Yarn

yarn add vue-scrollama intersection-observer

使用

基础用法

任何直接放置在Scrollama组件中的元素都将被视为步骤。当用户滚动时，这些事件将被触发并发出:

• step-enter: 当步骤元素的顶部或底部边缘进入偏移阈值时触发。
• step-exit: 当步骤元素的顶部或底部边缘退出偏移阈值时触发。
• step-progress: 当步骤元素持续通过偏移阈值时触发。

<template>
  <Scrollama @step-enter="stepEnterHandler">
    <div class="step1" data-step="a">...</div> // classes like .step1 are helpful to adjust the style and dimensions of a step
    <div class="step2" data-step="b">...</div> // data-* attributes are helpful to store instructions to be used in handlers
    <div class="step3" data-step="c">...</div>
  </Scrollama>
</template>

<script>
import 'intersection-observer' // for cross-browser support
import Scrollama from 'vue-scrollama'

export default {
  components: {
    Scrollama
  },
  methods: {
    stepEnterHandler ({element, index, direction}) {
      // handle the step-event as required here
      console.log(element, index, direction)
    }
  }
}

<style src="vue-scrollama/dist/vue-scrollama.css"></style>
<style>
/* your styles here */
</style>

Sticky Graphic

这种模式下，需要放入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>

效果如图：

选项

• offset: (number, 0 - 1): 触发偏移量，顶部占窗口的比例 (默认: 0.5)
• progress: (boolean): 是否启动增量步骤进度更新。(默认: false)
• debug: (boolean):是否显示调试工具 (默认: false)
• order: (boolean): 是否保持步骤的触发顺序。 (比如确保步骤2在步骤1退出之后再触发)。 (默认: true)
• once: (boolean): 仅在步骤进入的时候触发，触发之后移除监听 默认: false
• threshold: (number, 1+): T进度间隔的粒度，以像素为单位(越小触发次数越多). (默认: 4)