vue滚动组件关于定位的一个小问题

vue集成better-scroll插件关于层级定位问题

在写vue列表的业务部分经常会用到滚动组件 于是在项目当中集成第三方的插件better-scroll

为什么用第三方插件

能够快速开发的插件就是好插件，不墨迹就是干！下面就是我写滚动组件的一个案例

html部分：

<template>
    <div class="works">
        <div class="wrapper scrollWork" ref="MyWrapper">
            <div class="content">
                <ProCollection></ProCollection>
            </div>
        </div>
    </div>
</template>

JavaScript部分

import ProCollection from './ProCollection'//导入列表组件
import BScroll from 'better-scroll'//导入第三方组件
export default {
        name: "Works",
        components: {
            ProCollection
        },
        mounted() {
            this.scroll = new BScroll(this.$refs.MyWrapper, {
                //只有设置成true pullingUp才能使用
                pullUpLoad: true,
                click: true,
                probeType: 2
            });

            this.scroll.on("scroll", ({x, y}) => {
                // console.log(y);
                if (y < -970) {
                    this.flag = true;
                } else {
                    this.flag = false;
                }
            });
        }
    }

<style scoped lang="scss">
    .works {
        width: 100%;
        height: 100%;
    }

    .works .scrollWork {
        height: 100%;
        width: 100%;
        z-index: 4; /*其他组件层级大于本组件*/
        padding: 0 10px;
        position: fixed; /*在当前页面的其他组件必须使用定位才能正常滚动*/
        top: 478px;
    }
</style>