ScrollReveal.js 是一个用于在网页元素滚动进入视口时触发动画的 JavaScript 库。它非常适合用来增加页面滚动时的视觉效果，但它本身并不直接控制滚轮滚动的行为或动画。ScrollReveal.js 主要用于当用户滚动页面，使得元素进入视口时，元素以动画的形式呈现。下面是如何在 Vue.js 项目中使用 ScrollReveal.js 来实现这种效果的基本步骤：
1. 安装 ScrollReveal.js
首先，您需要确保已经在项目中安装了 ScrollReveal.js。如果还没有安装，可以通过 npm 或 yarn 来安装：
npm install scrollreveal
或者
yarn add scrollreveal
2. 在 Vue 组件中使用 ScrollReveal.js
接下来，在您的 Vue 组件中引入并使用 ScrollReveal.js。这里有一个简单的例子：
<template>
<div class="container">
<div class="item2" v-for="(item, index) in items" :key="index">
<!-- 您的内容 -->
</div>
</div>
</template>
<script>
import ScrollReveal from 'scrollreveal'
export default {
data() {
return {
items: [] // 假设这是您想要展示的数据列表
}
},
mounted() {
// 使用 ScrollReveal.js
ScrollReveal().reveal('.item2', {
distance: '50px',
duration: 500,
easing: 'ease',
origin: 'bottom',
reset: true // 每次元素进入视口时都会触发动画
});
}
}
</script>
<style>
.container {
/* 样式 */
}
.item2 {
/* 样式 */
}
</style>
在这个例子中，当 .item2 类的元素滚动进入视口时，它们将以动画的形式出现。您可以通过调整 ScrollReveal().reveal 方法的参数来自定义动画的效果，如动画持续时间（duration）、动画起始方向（origin）等。
请注意，ScrollReveal.js 更多地关注于滚动动画的触发，而不是滚轮滚动行为本身。如果您需要更精细地控制滚轮滚动（例如平滑滚动效果），可能需要结合其他库或自定义 JavaScript 代码来实现。
结合自动滚动使用
当鼠标移开时自动滚动，当鼠标放在组件上时，可以使用滚轮滚动
<div class="item2 hideScrollBar" ref="item2Inner">
<div class="item2Inner" >
<item2 v-if="data.measure" :list="indicators"></item2>
<h3>评价结果</h3>
</div>
</div>
</div>
import ScrollReveal from 'scrollreveal'
// 使用 ScrollReveal.js
ScrollReveal().reveal(this.$refs.item2Inner, {
distance: '50px',
duration: 500,
easing: 'ease',
origin: 'bottom',
reset: true // 每次元素进入视口时都会触发动画
});
.item2 {
width: calc(100% - 20px);
margin-left: 10px;
height: calc(100% - 270px);
position: relative;
overflow: auto;
.item2Inner {
margin-bottom: 20px;
animation: scrollUp 20s linear infinite;
}
}
/* 定义关键帧动画 */
@keyframes scrollUp {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-50%);
}
}
/* 鼠标悬停时暂停动画 */
.item2:hover .item2Inner, .item2.active .item2Inner {
animation-play-state: paused;
}
