Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
vue-agile-scrollbar
Advanced tools
Readme
基于vue的自定义滚动条组件,完全基于浏览器的原生滚动,拥有原生滚动体验,又能自定义滚动条样式,简单而强大
通过npm 或者 yarn安装
yarn add vue-agile-scrollbar
npm i vue-agile-scrollbar
引入
import 'vue-agile-scrollbar/dist/style.css'
import vueAgileScrollbar from 'vue-agile-scrollbar'
<template>
<div style="height:200px;width:500px;border:solid #eee 1px">
<vueAgileScrollbar>
<div style="width:10000px; height:100000px"></div>
</vueAgileScrollbar>
</div>
</template>
<script>
import vueAgileScrollbar from 'vue-agile-scrollbar'
import 'vue-agile-scrollbar/dist/style.css'
export default {
components: { vueAgileScrollbar },
data () {
return {
}
}
}
</script>
name | 类型 | 默认值 | 说明 |
---|---|---|---|
minBarSize | Number | 50 | 滚动条最小尺寸, Y轴滚动条的高度或X轴滚动条的宽度不会小于这个值 |
scrollTop | Number | 0 | 指定滚动条滚到距离顶部某个位置 |
scrollLeft | Number | 0 | 指定滚动条滚到距离左边某个位置 |
offsetLeft | Number | 0 | 滚动距离左边的偏移量 |
offsetRight | Number | 10 | 滚动距离右边的偏移量 |
offsetTop | Number | 0 | 滚动距离顶部的偏移量 |
offsetBottom | Number | 10 | 滚动距离底部的偏移量 |
isAutoUpdate | Boolean | true | element改变后,是否自动更新 |
dragSpeedX | Number | 1 | 拖拽X滚动条滚动阀值, 值越大滚动越快,越小滚动越慢 |
dragSpeedY | Number | 1 | 拖拽Y滚动条滚动阀值, 值越大滚动越快,越小滚动越慢 |
displayType | String | hover | 滚动条显示类型 show: 一直显示 hover:鼠标移入显示 hide:一直不显示 |
name | 回调参数 | 说明 |
---|---|---|
scroll | function(scrollValue: Object, $event) | 滚动会触发该事件 |
scroll-hit | function(type: String, scrollValue: Object) | 滚动条触底、触顶、触左、触右后出发该事件 |
updated | function(scrollValue: Object) | 容器更新后会触发该事件 |
name | 参数 | 说明 |
---|---|---|
updated() | - | element改变后, 可以通过该方法手动更新滚动容器状态 |
setScrollLeft(number) | - | 改变滚动条左边滚动距离 |
setScrollTop(number) | - | 改变滚动条上边滚动距离 |
FAQs
Custom agile scroll bar
The npm package vue-agile-scrollbar receives a total of 7 weekly downloads. As such, vue-agile-scrollbar popularity was classified as not popular.
We found that vue-agile-scrollbar demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.