2
0
mirror of https://github.com/frappe/books.git synced 2025-02-09 15:38:39 +00:00
books/src/components/WithScroll.vue
2022-05-23 16:18:23 +05:30

41 lines
877 B
Vue

<template>
<div class="scroll-container">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'WithScroll',
emits: ['scroll'],
mounted() {
this.listener = () => {
let { scrollLeft, scrollTop } = this.$el;
this.$emit('scroll', { scrollLeft, scrollTop });
};
this.$el.addEventListener('scroll', this.listener);
},
beforeUnmount() {
if (this.listener) {
this.$el.removeEventListener('scroll', this.listener);
delete this.listener;
}
},
};
</script>
<style>
.scroll-container::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.scroll-container::-webkit-scrollbar-thumb {
background-color: theme('colors.gray.100');
}
.scroll-container::-webkit-scrollbar-thumb:hover {
background-color: theme('colors.gray.200');
}
.scroll-container::-webkit-scrollbar-track {
background-color: white;
}
</style>