OverlayScrollbars插件监听滚动条的用法
姚德容
OverlayScrollbars
OverlayScrollbars文档
vue 的用法
// 1.安装
npm install overlayscrollbars
npm install overlayscrollbars-vue
// 2.main.js中引用
import Vue from "vue";
import "overlayscrollbars/css/OverlayScrollbars.css";
import OverlayScrollbars from "overlayscrollbars";
import { OverlayScrollbarsPlugin } from "overlayscrollbars-vue";
Vue.use(OverlayScrollbarsPlugin);
Vue.use(OverlayScrollbars);
<!--3.（1）引用-->
<overlay-scrollbars ref="osComponentRef" :options="options" style="height:100%">
<!-- 需要包裹的内容 -->
</overlay-scrollbars>
// 3.（2）引用
export default {
data(){
return {
options: {}
}
},
mounted() {
// this.init();
let obj = this.$refs.osComponentRef;
let that = this;
this.options = {
callbacks: {
onScroll: function() {
let positionY = obj.osInstance().scroll().position.y; //内容滚动的距离
let maxY = obj.osInstance().scroll().max.y; //内容的高度
if (positionY == maxY) {//滚动条滚动到底部
console.log('已经到底部了')
}
}
}
};
},
}
jquery用法：
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>OverlayScrollbars</title>
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"/>-->
<link href="https://cdn.bootcdn.net/ajax/libs/overlayscrollbars/1.9.1/css/OverlayScrollbars.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="current-scroll">滚动条</div>
<script src="./js/jquery-1.10.1.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/overlayscrollbars/1.9.1/js/jquery.overlayScrollbars.min.js"></script>
<script>
$(function () {
//初始化
$(".current-scroll").overlayScrollbars({}).scroll();
//监听滚动条
// $(".current-scroll").overlayScrollbars({
// callbacks:{
// onScroll:function(){
// console.log('正在滚动中')
// }
// }
// })
})
//设置滚动条的位置
let instances = $(".current-scroll").overlayScrollbars();
let scrolly = instances.scroll().max.y;
instances.scroll({ x: 0, y: scrolly + 60 });
</script>
</body>
</html>
**注意：**覆盖textarea的滚动条，需要重置scrollbar的宽度
//可全局设置滚动条的宽度
::-webkit-scrollbar {
width: 7px;
}
类似资料：