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.
vue2-scrollbar
Advanced tools
Readme
The Simplest Scroll Area Component with custom scrollbar for Vue 2. It's based on react-scrollbar. All animation, Height and Width are pure CSS, So it's TOTALLY CUSTOMIZABLE and RESPONSIVE! YEAH!.
You can import vue-scrollbar.vue to your vue component file like this and process it with your preprocessor.
You can install it via NPM
npm install vue2-scrollbar
Or Just put it after Vue JS~
<script src="https://vuejs.org/js/vue.min.js"></script>
<script src="./dist/vue2-scrollbar.js"></script>
<script>
// Don't Forget to register it
new Vue({
components: {
scrollbar: Vue2Scrollbar
}
});
</script>
Don't forget to import vue 2 css. You can link it via html
<link rel="stylesheet" href="vue2-scrollbar/dist/style/vue2-scrollbar.css">
Or You can import it using commonJS
require('vue2-scrollbar/style/vue2-scrollbar.css')
Its style is very customizable. You can put any CSS over it. And You can add custom class via its prop.
import ScrollBar from 'vue2-scrollbar'
// Or
var ScrollBar = require('vue2-scrollbar');
<template>
<div>
<vue-scrollbar classes="my-scrollbar" ref="Scrollbar">
<div class="scroll-me">
<div class="kolom"></div>
<div class="kolom"></div>
<div class="kolom"></div>
<div class="kolom"></div>
<div class="kolom"></div>
<div class="kolom"></div>
<div class="kolom"></div>
<div class="kolom"></div>
<div class="kolom"></div>
<div class="kolom"></div>
<div class="kolom"></div>
<div class="kolom"></div>
<div class="kolom"></div>
<div class="kolom"></div>
<div class="kolom"></div>
<div class="kolom"></div>
<div class="clearfix"></div>
</div>
</vue-scrollbar>
</div>
</template>
<script>
import VueScrollbar from 'vue2-scrollbar';
require("vue2-scrollbar/style/vue2-scrollbar.css")
// It's required to set min height of the scrollbar wrapper
require("./your/custom/style/app.css")
export default {
components: { VueScrollbar },
};
</script>
Just the ordinary class name for styling the wrapper. So, It's TOTALLY CUSTOMIZABLE!
/*The Wrapper*/
.my-scrollbar{
width: 35%;
min-width: 300px;
max-height: 450px;
}
/*The Content*/
.scroll-me{
min-width: 750px;
}
If you prefer to use inline style to styling the scrollbar, you can pass the styling object to this props.
this.styling = {
/* Scrollbar */
scrollbar: {
width: "35%",
minWidth: "300px",
maxHeight: "450px"
},
}
<vue-scrollbar :style="styling.scrollbar"></vue-scrollbar>
The wheel step in pixel. The default is 53 pixel per wheel.
Applied when the scrollbar in the max vertical or max horizontal scrolling. Make a possibility to add some load more feature or infinite scroll
// Examples
handleMaxScroll(direction) {
console.log(direction);
}
<vue-scrollbar :onMaxScroll="handleMaxScroll"></vue-scrollbar>
You can do some methods by accessing the component via javascript.
this.$refs.scrollbar.someMethod()
To scroll the scrollbar to the Y
// Examples
someMethod() {
this.$refs.Scrollbar.scrollToY(100)
}
To scroll the scrollbar to the X
// Examples
someMethod() {
this.$refs.Scrollbar.scrollToX(100)
}
Just Contact Me At:
MIT Copyright (c) 2016 - forever Naufal Rabbani
FAQs
The Simplest Scroll Area Component with custom scrollbar for Vue 2
The npm package vue2-scrollbar receives a total of 647 weekly downloads. As such, vue2-scrollbar popularity was classified as not popular.
We found that vue2-scrollbar demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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.