Vue中实现移动端的scroll滚动
介绍:
在移动端或PC,页面的部分内容需要我们让其在页面滚动,这时候我们都会使用::-webkit-scrollbar来修饰原生滚动条,这样会影响滚动条对宽度的检测,所有就有了该组件,不需要配置横向或纵向滚动,自定义滚动条完全按照原生的方式去显示,如果内容区域存在纵向滚动条,使用它后将替换纵向滚动条
安装
//npm
npm install vue-custom-scrollbar
//yarn
yarn add vue-custom-scrollbar
局部使用
<template>
<div>
<vue-custom-scrollbar class="scroll-area" :settings="settings" @ps-scroll-y="scrollHanle">
<!-- 内容 -->
</vue-custom-scrollbar>
</div>
</template>
import vueCustomScrollbar from 'vue-custom-scrollbar'
import "vue-custom-scrollbar/dist/vueScrollbar.css"
export default {
components: {
vueCustomScrollbar
},
data() {
return {
settings: {
suppressScrollY: false,
suppressScrollX: false,
wheelPropagation: false
}
}
},
methods: {
scrollHanle(evt) {
console.log(evt)
}
}
/* 设置滚动的高度*/
<style >
.scroll-area {
position: relative;
margin: auto;
width: 600px;
height: 400px;
}
</style>