diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue index 0ec76e72..34a7e55f 100644 --- a/src/layout/components/TagsView/ScrollPane.vue +++ b/src/layout/components/TagsView/ScrollPane.vue @@ -19,12 +19,21 @@ export default { return this.$refs.scrollContainer.$refs.wrap } }, + mounted() { + this.scrollWrapper.addEventListener('scroll', this.emitScroll, true) + }, + beforeDestroy() { + this.scrollWrapper.removeEventListener('scroll', this.emitScroll) + }, methods: { handleScroll(e) { const eventDelta = e.wheelDelta || -e.deltaY * 40 const $scrollWrapper = this.scrollWrapper $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4 }, + emitScroll() { + this.$emit('scroll') + }, moveToTarget(currentTag) { const $container = this.$refs.scrollContainer.$el const $containerWidth = $container.offsetWidth diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index 642b4f42..d2a56e70 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -1,6 +1,6 @@ <template> <div id="tags-view-container" class="tags-view-container"> - <scroll-pane ref="scrollPane" class="tags-view-wrapper"> + <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll"> <router-link v-for="tag in visitedViews" ref="tag" @@ -189,6 +189,9 @@ export default { }, closeMenu() { this.visible = false + }, + handleScroll() { + this.closeMenu() } } }