project/resources/assets/js/_components/ScrollerY.vue

<template>
    <div ref="scrollerView" class="app-scroller" :class="[static ? 'app-scroller-static' : '']">
        <slot/>
    </div>
</template>

<style lang="scss" scoped>
    .app-scroller {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .app-scroller-static {
        position: static;
        flex: 1;
    }
</style>
<script>
    export default {
        name: 'ScrollerY',
        props: {
            static: {
                type: Boolean,
                default: false
            },
        },
        data() {
            return {
                scrollY: 0,
                scrollDiff: 0,
                scrollInfo: {},
            }
        },
        mounted() {
            this.$nextTick(() => {
                let scrollListener = typeof this.$listeners['on-scroll'] === "function";
                let scrollerView = $A(this.$refs.scrollerView);
                scrollerView.scroll(() => {
                    let wInnerH = Math.round(scrollerView.innerHeight());
                    let wScrollY = scrollerView.scrollTop();
                    let bScrollH = this.$refs.scrollerView.scrollHeight;
                    this.scrollY = wScrollY;
                    if (scrollListener) {
                        let direction = 'static';
                        let directionreal = 'static';
                        if (this.scrollDiff - wScrollY > 50) {
                            this.scrollDiff = wScrollY;
                            direction = 'down';
                        } else if (this.scrollDiff - wScrollY < -100) {
                            this.scrollDiff = wScrollY;
                            direction = 'up';
                        }
                        if (this.scrollDiff - wScrollY > 1) {
                            this.scrollDiff = wScrollY;
                            directionreal = 'down';
                        } else if (this.scrollDiff - wScrollY < -1) {
                            this.scrollDiff = wScrollY;
                            directionreal = 'up';
                        }
                        this.$emit('on-scroll', {
                            scale: wScrollY / (bScrollH - wInnerH),     //已滚动比例
                            scrollY: wScrollY,                          //滚动的距离
                            scrollE: bScrollH - wInnerH - wScrollY,     //与底部距离
                            direction: direction,                       //滚动方向
                            directionreal: directionreal,               //滚动方向（即时）
                        });
                    }
                });
            });
        },
        activated() {
            if (this.scrollY > 0) {
                this.$nextTick(() => {
                    this.scrollTo(this.scrollY);
                });
            }
        },
        methods: {
            scrollTo(top, animate) {
                if (animate === false) {
                    $A(this.$refs.scrollerView).stop().scrollTop(top);
                } else {
                    $A(this.$refs.scrollerView).stop().animate({"scrollTop": top});
                }
            },
            scrollToBottom(animate) {
                this.scrollTo(this.$refs.scrollerView.scrollHeight, animate);
            }
        }
    }
</script>