<style lang="less" scoped>
.scroll-box {
height: 100%;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-x: hidden;
overflow-y: hidden;
&::-webkit-scrollbar {
display: none;
}
}
.show-scrollbar {
overflow-y: auto;
&::-webkit-scrollbar {
display: block;
width: 8px;
height: 0;
background: transparent !important;
}
/* 滚动槽 */
&::-webkit-scrollbar-track {
border-radius: 4px;
}
/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
border-radius: 4px;
background: #cecece !important;
}
}
</style>
<template>
<div
:class="['scroll-box',isShowScrollbar&&'show-scrollbar']"
@scroll="onScrollEvent"
@mouseleave="()=>{this.isShowScrollbar=false}"
@mouseenter="()=>{this.isShowScrollbar=true}"
>
<slot></slot>
</div>
</template>
<script>
export default {
name: 'scroll-box',
data() {
return {
isShowScrollbar:false
};
},
created() {},
mounted() {},
methods: {
onScrollEvent(e) {
const { scrollHeight, scrollTop, clientHeight } = e.target;
if (scrollTop + clientHeight - scrollHeight >= -1) {
this.$emit('onScrollBottom');
}
}
}
};
</script>