a vue-directive to fire when scroll at top or bottom

scroll-at.js

'scroll-at': {
        /**
         * @example: <div v-scroll-at.bottom="loadMore"></div>
         */

        _bind() {
            this.el.addEventListener('scroll', this.scrollHandler)
        },
        _unbind() {
            this.el.removeEventListener('scroll', this.scrollHandler)
        },
        bind() {
            let loading = false
            let done = () => { loading = false }

            this.scrollHandler = () => {
                let triggerTop = this.modifiers.top || false
                let distance = this.el.scrollTop
                let scrollMax = this.el.scrollHeight - this.el.clientHeight
                let trigger = triggerTop ? distance < 10 : distance > scrollMax - 10

                if (this.handler && !loading && trigger) {
                    loading = true

                    let result = this.handler()

                    if (result === undefined) done()
                    else if (result.then && result.then.call) result.then(done, done)
                    else done()
                }
            }

            this._bind()
        },
        update(value) {
            this.handler = value
            value.unbind = () => this._unbind()
            value.bind = () => this._bind()
        },
        unbind() {
            this._unbind()
        }
    }