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;
}

OverlayScrollbars插件监听滚动条的用法相关推荐

Vue监听滚动条事件点击回到顶部
Vue监听滚动条事件点击回到顶部监听滚顶条事件: created () {this.listenerFunction(); }, beforeDestroy () {document.remove ...
监听滚动条和浏览器大小变化
监听滚动条和浏览器大小变化: $(document).ready(function() {//监听滚动条的变化$(window).scroll(function() {ddd();}); //监听浏览 ...
uni-app watch事件监听三种用法
1.普通监听(无法监听到第一次绑定的变化) <input type="text" v-model="userName"/> //监听当userNa ...
vue @scroll 监听滚动条事件
vue @scroll 监听滚动条事件为啥要使用 @scroll 监听滚动条事件没用在vue.js 开发前我们监听滚动条事件都是在window挂监听事件例如:window.onscroll = ...
react hooks 记录监听滚动条事件踩得坑
今天写项目时需要获取滚动条距离顶部和左部距离踩了一些坑话不多说直接上代码 const scrollChange = () => {// 监听滚动条距离顶部距离console.log(doc ...
html页面滚动条监听事件,jquery如何监听滚动条事件？
jquery如何监听滚动条事件?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 问题: 在浏览很多网页中都会发现,当滚动条滚动到一定的位置的时候就出显示一 ...
监听滚动条事件来实现导航栏吸顶效果
首先要实现监听滚动条的位置: (1)在mounted钩子函数中随便定义一个方法来获取滚动条变化: window.addEventListener('scroll', this.handleScroll ...
JS 监听滚动条事件
JS 监听滚动条事件获取滚动条位置代码监听滚动条方法效果获取滚动条位置代码 /** * 获取滚动条位置 */ function getScrollTop() {var scrollPos;if ...
Vue全局监听滚动条事件
项目需求滚动条大于200时候,头部固定定位,小于的时候相对定位,监听滚动条事件: // 全局监听,写在App.vue里面methods: {handleScroll(){let scrollTop = ...

OverlayScrollbars插件监听滚动条的用法

vue 的用法

jquery用法：

OverlayScrollbars插件监听滚动条的用法相关推荐

最新文章

热门文章