Skip to content

Commit

Permalink
fix(vuestic-scrollbar): fixed working in firefox
Browse files Browse the repository at this point in the history
papasikis committed Aug 4, 2017
1 parent b78a006 commit 82add54
Showing 2 changed files with 17 additions and 16 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -16,6 +16,7 @@
"bootstrap": "^4.0.0-alpha.6",
"bootstrap-vue": "^0.9.0",
"chart.js": "^2.6.0",
"detect-browser": "^1.7.1",
"element-resize-detector": "^1.1.12",
"font-awesome": "^4.7.0",
"gemini-scrollbar": "^1.5.1",
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
<template>
<div class="vuestic-scrollbar">
<div class="scrollbar-wrapper">
<div class="scrollbar-content">
<div class="vuestic-scrollbar" @wheel="scroll">
<div class="scrollbar-wrapper" ref="scrollbarWrapper">
<div class="scrollbar-content" ref="scrollbarContent">
<slot></slot>
</div>
<div class="track"><div class="thumb"></div></div>
<div class="track" ref="track"><div class="thumb" ref="thumb"></div></div>
</div>
</div>
</template>

<script>
let erdMaker = require('element-resize-detector')
let erd = erdMaker()
const erdMaker = require('element-resize-detector')
const erd = erdMaker()
const browser = require('detect-browser')
let vm = {
name: 'vuestic-scrollbar',
@@ -38,18 +39,18 @@
},
scroll (e) {
let delta = (e.deltaY * 0.01 * this.speed)
if (browser.name === 'firefox') {
delta *= 10
}
if (this.isDown && delta > 0 || this.isUp && delta < 0 || this.contentHeight <= this.maxHeight) {
e.preventDefault()
return
}
let currentMT = this.content.style.marginTop === ''
? 0
: parseInt(this.content.style.marginTop, 10)
: parseFloat(this.content.style.marginTop, 10)
let nextMT = 0
if (this.maxHeight - (currentMT - delta * this.speed) > this.contentHeight && delta > 0) {
nextMT = this.maxHeight - this.contentHeight
this.isDown = true
@@ -63,29 +64,28 @@
this.isUp = false
}
}
this.content.style.marginTop = nextMT + 'px'
this.calcThumb()
e.preventDefault()
}
},
mounted () {
this.track = this.$el.getElementsByClassName('track')[0]
this.thumb = this.track.getElementsByClassName('thumb')[0]
this.content = this.$el.getElementsByClassName('scrollbar-content')[0]
this.wrapper = this.$el.getElementsByClassName('scrollbar-wrapper')[0]
this.track = this.$refs.track
this.thumb = this.$refs.thumb
this.content = this.$refs.scrollbarContent
this.wrapper = this.$refs.scrollbarWrapper
let handler = () => {
this.calcSize()
this.calcThumb()
}
erd.listenTo(this.content, handler)
erd.listenTo(this.$el, handler)
this.$el.addEventListener('wheel', this.scroll, false)
},
destroyed () {
erd.removeAllListeners(this.content)
erd.removeAllListeners(this.$el)
this.$el.removeEventListener('wheel', this.scroll, false)
},
data () {
return {

0 comments on commit 82add54

Please sign in to comment.