InfiniteScroll component

InfiniteScroll.vue

<script>
export default {
  name: 'InfiniteScroll',

  template: '<div ref="el" style="height: 0;">&nbsp;</div>',

  props: {
    offset: {
      type: Number,
      default: 300,
    },
  },

  methods: {
    isElementInViewport: function(el) {
      var rect = el.getBoundingClientRect();

      return (
          rect.top >= 0 &&
          rect.left >= 0 &&
          rect.bottom <= ((window.innerHeight || document.documentElement.clientHeight) + this.offset) && /*or $(window).height() */
          rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
      );
    },

    onVisibilityChange: function(el, callback) {
      var old_visible;
      return () => {
          var visible = this.isElementInViewport(el);
          if (visible != old_visible) {
              old_visible = visible;
              if (typeof callback == 'function') {
                  callback();
              }
          }
      };
    },
  },

  mounted: function() {
    const el = this.$refs.el;

    this.handler = this.onVisibilityChange(el, () => {
      this.$emit('infinite-scroll');
    });

    addEventListener('DOMContentLoaded', this.handler, false);
    addEventListener('load', this.handler, false);
    addEventListener('scroll', this.handler, false);
    addEventListener('resize', this.handler, false);
  },

  beforeDestroy: function() {
    removeEventListener('DOMContentLoaded', this.handler);
    removeEventListener('load', this.handler);
    removeEventListener('scroll', this.handler);
    removeEventListener('resize', this.handler);
  },
};
</script>