自己实现的vue无限滚动

<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>