Added bounce effect to the scrollbar

'
pull/30/head
Nikan Dalvand 2019-07-28 15:12:47 +04:30
parent c0de57da6c
commit 336ee60a39
2 changed files with 6 additions and 3 deletions

View File

@ -127,6 +127,8 @@ import Logo from '../components/Logo'
import { mapActions, mapGetters } from 'vuex' import { mapActions, mapGetters } from 'vuex'
import Button from '../components/Button' import Button from '../components/Button'
import Scrollbar from 'smooth-scrollbar' import Scrollbar from 'smooth-scrollbar'
import OverscrollPlugin from 'smooth-scrollbar/plugins/overscroll'
Scrollbar.use(OverscrollPlugin)
export default { export default {
name: 'DockableSidebar', name: 'DockableSidebar',
components: { MenuGroup, MenuItem, Logo, Button }, components: { MenuGroup, MenuItem, Logo, Button },
@ -135,7 +137,7 @@ export default {
}, },
mounted () { mounted () {
let container = this.$el.getElementsByClassName('sidebar')[0] let container = this.$el.getElementsByClassName('sidebar')[0]
Scrollbar.init(container) Scrollbar.init(container, { overscrollEffect: 'bounce', continuousScrolling: true })
}, },
methods: { methods: {
...mapActions(['toggleMenuStatus']) ...mapActions(['toggleMenuStatus'])

View File

@ -69,13 +69,14 @@ import Button from '../components/Button'
import carousel from 'vue-owl-carousel' import carousel from 'vue-owl-carousel'
import MusicBox from '../components/MusicBox' import MusicBox from '../components/MusicBox'
import Scrollbar from 'smooth-scrollbar' import Scrollbar from 'smooth-scrollbar'
import OverscrollPlugin from 'smooth-scrollbar/plugins/overscroll'
Scrollbar.use(OverscrollPlugin)
export default { export default {
name: 'HomePage', name: 'HomePage',
components: { ActionBar, MusicRow, List, ListItem, Button, carousel, MusicBox }, components: { ActionBar, MusicRow, List, ListItem, Button, carousel, MusicBox },
mounted () { mounted () {
let container = this.$el let container = this.$el
Scrollbar.init(container) Scrollbar.init(container, { overscrollEffect: 'bounce', continuousScrolling: true })
}, },
data: () => { data: () => {
return { return {