perfect-scrollbar,Vue中的滚动触发组件
最近发现这个插件用的比较多,自己记录下,以便自己查阅;基本的使用方法$ npm install perfect-scrollbar然后在页面引用import PerfectScrollbar from 'perfect-scrollbar';获取dom节点,初始化scrollbarconst container = document.querySelector('#containe...
最近发现这个插件用的比较多,自己记录下,以便自己查阅;
基本的使用方法
$ npm install perfect-scrollbar
然后在页面引用
import PerfectScrollbar from 'perfect-scrollbar';
获取dom节点,初始化scrollbar
const container = document.querySelector('#container');
const ps = new PerfectScrollbar(container);
或者
const ps = new PerfectScrollbar('#container');
ps.update() 和 ps.destroy()更新和销毁滚动;自己根据情况使用
下面介绍一些参数
使用方法
const ps = new PerfectScrollbar('#container', {
wheelSpeed: 2,
wheelPropagation: true,
minScrollbarLength: 20
});
-
handlers {String[]}
它是滚动元素的处理程序列表。 -
默认值:[‘click-rail’, ‘drag-thumb’, ‘keyboard’, ‘wheel’, ‘touch’]
-
wheelSpeed {Number}
滚动速度应用于鼠标滚轮事件。
默认值:1 -
wheelPropagation {Boolean}
如果此选项为true,则当滚动到达边的末尾时,mousewheel事件将传播到父元素。
默认值:false -
swipeEasing {Boolean}
如果此选项为true,则会轻松滑动滚动。
默认值:true -
minScrollbarLength {Number?}
设置为整数值时,滚动条的滑块部分将不会缩小到该像素数以下。
默认值:null -
maxScrollbarLength {Number?}
设置为整数值时,滚动条的滑块部分不会在该像素数上展开。
默认值:null -
scrollingThreshold {Number}
这样就设置了threashold ps–scrolling-x和ps–scrolling-y类。在默认的CSS中,无论悬停状态如何,它们都会显示滚动条。单位是毫秒。
默认值:1000 -
useBothWheelAxes {Boolean}
设置为true时,只能看到一个(垂直或水平)滚动条,则垂直和水平滚动都会影响滚动条。
默认值:false -
suppressScrollX {Boolean}
设置为true时,无论内容宽度如何,X轴上的滚动条都将不可用。
默认值:false -
suppressScrollY {Boolean}
设置为true时,无论内容高度如何,Y轴上的滚动条都将不可用。
默认值:false -
scrollXMarginOffset {Number}
在不启用X轴滚动条的情况下,内容宽度可以超过容器宽度的像素数。允许一些“摆动空间”或“偏移中断”,因此仅因为几个像素而未启用X轴滚动条。
默认值:0 -
scrollYMarginOffset {Number}
在不启用Y轴滚动条的情况下,内容高度可以超过容器高度的像素数。允许一些“摆动空间”或“偏移中断”,因此仅因为几个像素而未启用Y轴滚动条。
默认值:0
参数这么多,我也没用过,你牛你来用;
下面是滚动的一些事件:
基础用法:
container.addEventListener (' ps-scroll-x ',() => { })
ps-scroll-y
当y轴向任一方向滚动时,此事件将触发。
ps-scroll-x
当x轴向任一方向滚动时,此事件将触发。
ps-scroll-up
向上滚动时会触发此事件。
ps-scroll-down
向下滚动时会触发此事件。
ps-scroll-left
滚动到左侧时会触发此事件。
ps-scroll-right
滚动到右侧时会触发此事件。
ps-y-reach-start
滚动到达y轴的开头时会触发此事件。
ps-y-reach-end
当滚动到达y轴的末尾时,此事件将触发(对于无限滚动非常有用)。
ps-x-reach-start
滚动到达x轴的起点时会触发此事件。
ps-x-reach-end
滚动到达x轴末端时会触发此事件。
**还可以在自己的函数中使用 ps.reach.x ,和 ps.reach.y 判断水平和垂直的滚动的位置;返回start和end;与自己的函数融合;
推荐文章:perfect-scrollbar
更多推荐
所有评论(0)