vue-chat-scroll-top-load

forked from vue-chat-scroll. Then add top loader handler.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>
<div id="main">
    <ul class="messages" v-chat-scroll @scroll-top="log">
      <li class="message" v-for="n in messages">{{ n }}</li>
    </ul>
</div>

CSS

ul{
    border: 2px solid blue;
    padding: 10px;
    height: 100px;
    overflow-y: scroll;
}

JavaScript

const scrollToBottom = el => {
    el.scrollTop = el.scrollHeight;
};

const emit = (vnode, name, data) => {
  var handlers = (vnode.data && vnode.data.on) ||
    (vnode.componentOptions && vnode.componentOptions.listeners);

  if (handlers && handlers[name]) {
    handlers[name].fns(data);
  }
}

const vChatScroll = {
    bind: (el, binding, vnode) => {
        let timeout;
        let scrolled = false;
        let scrolledTop = false;

        el.addEventListener('scroll', e => {
            if (timeout) window.clearTimeout(timeout);
            timeout = window.setTimeout(function() {
                scrolled = el.scrollTop + el.clientHeight + 1 < el.scrollHeight;
                console.log(el.scrollTop)
                if(el.scrollTop < 10){
                    emit(vnode, 'scroll-top', "123")
                    scrolledTop = true
                    console.log(scrolledTop)
                }
            }, 200);
        });

        (new MutationObserver(e => {
            let config = binding.value || {};
            let pause = config.always === false && scrolled;
            if(scrolledTop) return el.scrollTop = 10;
            if (pause || e[e.length - 1].addedNodes.length != 1) return;
            console.log(pause, scrolled)
            scrollToBottom(el);
        })).observe(el, {childList: true, subtree: true});
    },
    inserted: scrollToBottom
};

Vue.directive('chat-scroll', vChatScroll);

const main = new Vue({
	el: "#main",
	data: {
    	messages: Array(10).fill(0)
    },
    methods: {
    	log: function(){
        	console.log("123")
            this.messages.unshift("-1")
            this.messages.push("1")
        }
    }
})