<!--
    #VUE3 Todo
-->

<script>

export default {
    // components: { Component },
    // mixins: [ Mixin ],
    // props: { a: { type: Boolean, default: false } },
    data() {
        return { scrollPosition: { x: 0, y: 0 } };
    },
    computed: {
        scrollingElement() {
            // derived classes can return something here to watch somethign other than document
            return window !== undefined ? window : null;
        },
    },
    // watch: {},
    mounted() {
        if (this.scrollingElement && this.scroll) {
            let scroller = this.scrollingElement;
            let ticking = false;

            scroller.addEventListener('scroll', event => {
                this.scrollPosition.x = scroller.scrollX;
                this.scrollPosition.y = scroller.scrollY;

                if (!ticking) {
                    window.requestAnimationFrame(() => {
                        this.scroll();
                        ticking = false;
                    });

                    ticking = true;
                }
            });
        }
    },
    methods: {
        // base class should override
        // onScroll() {},
    },
};
</script>
