How can I get this working for horizontal scrolling?

[PatrLind]

I want to have a infinite single line horizontal scrolling container, but I cannot seem to get this working with this component. Is it possible or do I need to look elsewhere?

[a-kriya]

Yeah, that isn't currently possible with this component.

[PatrLind]

Ok, I see, how difficult would you think it would be to implement? I have not looked at the code yet, but maybe I could try to modify it myself and perhaps make a PR if it works out ok...

[a-kriya]

This particular block of code currently assumes vertical scrolling -- uses scrollTop/yOffsets/innerHeight/top-bottom positions.

Perhaps if you created another method that would be used for a horizontal scrolling mode, then it may be something @PeachScript want to include in this component.

[PeachScript]

@PatrLind @Syn-zeta thank you, please give me some time to think about it.

For the temporary solution, you can use the extend feature to override the getCurrentDistance method and make it support calculate horizontal distance.

[PatrLind]

谢谢@PeachScript , I will give it a try :)

[PatrLind]

It seems my test component I made works as I need it to.
In case anyone can make use of it, here it is (TypeScript):

import Vue from 'vue'
import { Component } from 'vue-property-decorator'
import InfiniteLoading from 'vue-infinite-loading'

@Component({
  extends: InfiniteLoading,
})
export class InfiniteLoadingExtra extends Vue {
  direction: 'top' | 'left' | 'right' | 'bottom'
  scrollParent: any
  forceUseInfiniteWrapper: boolean | null

  getCurrentDistance(this: InfiniteLoadingExtra) {
    let distance: number = 0
    if (this.direction === 'top') {
      distance = isNaN(this.scrollParent.scrollTop) ?
        this.scrollParent.pageYOffset :
        this.scrollParent.scrollTop
    } else if (this.direction === 'left') {
      distance = isNaN(this.scrollParent.scrollLeft) ?
        this.scrollParent.pageXOffset :
        this.scrollParent.scrollLeft
    } else if (this.direction === 'bottom') {
      const infiniteElmOffsetTopFromBottom = this.$el.getBoundingClientRect().top
      const scrollElmOffsetTopFromBottom = this.scrollParent === window ?
        window.innerHeight :
        this.scrollParent.getBoundingClientRect().bottom
      distance = infiniteElmOffsetTopFromBottom - scrollElmOffsetTopFromBottom
    } else if (this.direction === 'right') {
      const infiniteElmOffsetLeftFromRight = this.$el.getBoundingClientRect().left
      const scrollElmOffsetLeftFromRight = this.scrollParent === window ?
        window.innerWidth :
        this.scrollParent.getBoundingClientRect().right
      distance = infiniteElmOffsetLeftFromRight - scrollElmOffsetLeftFromRight
    }
    return distance
  }

  getScrollParent(elm = this.$el): any {
    let result: any | undefined
    if (elm.tagName === 'BODY') {
      result = window
    } else if (!this.forceUseInfiniteWrapper && (
      ((this.direction === 'top'  || this.direction === 'bottom') && ['scroll', 'auto'].indexOf(getComputedStyle(elm).overflowY!) > -1) ||
      ((this.direction === 'left' || this.direction === 'right')  && ['scroll', 'auto'].indexOf(getComputedStyle(elm).overflowX!) > -1)
    )) {
      result = elm
    } else if (elm.hasAttribute('infinite-wrapper') || elm.hasAttribute('data-infinite-wrapper')) {
      result = elm
    }
    return result || this.getScrollParent(elm.parentNode as any)
  }
}

Note that I needed to get the latest source code for this to work. The one I got thru npm was not extendable.

[PeachScript]

Haha, @PatrLind your Chinese is excellent! Thanks for your solution!

[demonmind]

@PatrLind this is something I need to use in my project too, but we do not use typescript. Do you have a JS snippet i can use?

[demonmind]

I cant get the @Component({....}) to work. Webpack fails to compile

[PatrLind]

@demonmind sorry for that, I made a vanilla JS version for you, but I have not tested it very well, so please give it a try:

<script>
import Vue from 'vue'
import { Component } from 'vue-property-decorator'
import InfiniteLoading from 'vue-infinite-loading'

export default {
  name: 'infinite-loading-extra',
  extends: InfiniteLoading,
  methods: {
    getCurrentDistance() {
      let distance = 0
      if (this.direction === 'top') {
        distance = isNaN(this.scrollParent.scrollTop) ?
          this.scrollParent.pageYOffset :
          this.scrollParent.scrollTop
      } else if (this.direction === 'left') {
        distance = isNaN(this.scrollParent.scrollLeft) ?
          this.scrollParent.pageXOffset :
          this.scrollParent.scrollLeft
      } else if (this.direction === 'bottom') {
        const infiniteElmOffsetTopFromBottom = this.$el.getBoundingClientRect().top
        const scrollElmOffsetTopFromBottom = this.scrollParent === window ?
          window.innerHeight :
          this.scrollParent.getBoundingClientRect().bottom
        distance = infiniteElmOffsetTopFromBottom - scrollElmOffsetTopFromBottom
      } else if (this.direction === 'right') {
        const infiniteElmOffsetLeftFromRight = this.$el.getBoundingClientRect().left
        const scrollElmOffsetLeftFromRight = this.scrollParent === window ?
          window.innerWidth :
          this.scrollParent.getBoundingClientRect().right
        distance = infiniteElmOffsetLeftFromRight - scrollElmOffsetLeftFromRight
      }
      return distance
    },

    getScrollParent(elm = this.$el) {
      let result
      if (elm.tagName === 'BODY') {
        result = window
      } else if (!this.forceUseInfiniteWrapper && (
        ((this.direction === 'top'  || this.direction === 'bottom') && ['scroll', 'auto'].indexOf(getComputedStyle(elm).overflowY) > -1) ||
        ((this.direction === 'left' || this.direction === 'right')  && ['scroll', 'auto'].indexOf(getComputedStyle(elm).overflowX) > -1)
      )) {
        result = elm
      } else if (elm.hasAttribute('infinite-wrapper') || elm.hasAttribute('data-infinite-wrapper')) {
        result = elm
      }
      return result || this.getScrollParent(elm.parentNode)
    }
  }
}

</script>

[demonmind]

Thank you! will try it and let you know

[yagogak]

@PatrLind this is working !, dont forget to set props direction to right on your infinite-loading-extra component

[rivajunior]

@demonmind sorry for that, I made a vanilla JS version for you, but I have not tested it very well, so please give it a try:

<script>
import Vue from 'vue'
import { Component } from 'vue-property-decorator'
import InfiniteLoading from 'vue-infinite-loading'

export default {
  name: 'infinite-loading-extra',
  extends: InfiniteLoading,
  methods: {
    getCurrentDistance() {
      let distance = 0
      if (this.direction === 'top') {
        distance = isNaN(this.scrollParent.scrollTop) ?
          this.scrollParent.pageYOffset :
          this.scrollParent.scrollTop
      } else if (this.direction === 'left') {
        distance = isNaN(this.scrollParent.scrollLeft) ?
          this.scrollParent.pageXOffset :
          this.scrollParent.scrollLeft
      } else if (this.direction === 'bottom') {
        const infiniteElmOffsetTopFromBottom = this.$el.getBoundingClientRect().top
        const scrollElmOffsetTopFromBottom = this.scrollParent === window ?
          window.innerHeight :
          this.scrollParent.getBoundingClientRect().bottom
        distance = infiniteElmOffsetTopFromBottom - scrollElmOffsetTopFromBottom
      } else if (this.direction === 'right') {
        const infiniteElmOffsetLeftFromRight = this.$el.getBoundingClientRect().left
        const scrollElmOffsetLeftFromRight = this.scrollParent === window ?
          window.innerWidth :
          this.scrollParent.getBoundingClientRect().right
        distance = infiniteElmOffsetLeftFromRight - scrollElmOffsetLeftFromRight
      }
      return distance
    },

    getScrollParent(elm = this.$el) {
      let result
      if (elm.tagName === 'BODY') {
        result = window
      } else if (!this.forceUseInfiniteWrapper && (
        ((this.direction === 'top'  || this.direction === 'bottom') && ['scroll', 'auto'].indexOf(getComputedStyle(elm).overflowY) > -1) ||
        ((this.direction === 'left' || this.direction === 'right')  && ['scroll', 'auto'].indexOf(getComputedStyle(elm).overflowX) > -1)
      )) {
        result = elm
      } else if (elm.hasAttribute('infinite-wrapper') || elm.hasAttribute('data-infinite-wrapper')) {
        result = elm
      }
      return result || this.getScrollParent(elm.parentNode)
    }
  }
}

</script>

I have formated the code, but even that way, didn't work

import InfiniteLoading from 'vue-infinite-loading';

export default {
  name: 'InfiniteLoadingExtra',
  extends: InfiniteLoading,
  methods: {
    getCurrentDistance() {
      switch (this.direction) {
        case 'top':
          return isNaN(this.scrollParent.scrollTop)
            ? this.scrollParent.pageYOffset
            : this.scrollParent.scrollTop;
        case 'left':
          return isNaN(this.scrollParent.scrollLeft)
            ? this.scrollParent.pageXOffset
            : this.scrollParent.scrollLeft;
        case 'bottom':
          return (
            this.$el.getBoundingClientRect().top -
            (this.scrollParent === window
              ? window.innerHeight
              : this.scrollParent.getBoundingClientRect().bottom)
          );
        case 'right':
          return (
            this.$el.getBoundingClientRect().left -
            (this.scrollParent === window
              ? window.innerWidth
              : this.scrollParent.getBoundingClientRect().right)
          );
        default:
          return 0;
      }
    },
    getScrollParent(elm = this.$el) {
      if (elm.tagName === 'BODY') {
        return window;
      }

      if (
        !this.forceUseInfiniteWrapper &&
        (((this.direction === 'top' || this.direction === 'bottom') &&
          ['scroll', 'auto'].indexOf(getComputedStyle(elm).overflowY) > -1) ||
          ((this.direction === 'left' || this.direction === 'right') &&
            ['scroll', 'auto'].indexOf(getComputedStyle(elm).overflowX) > -1))
      ) {
        return elm;
      }

      if (
        elm.hasAttribute('infinite-wrapper') ||
        elm.hasAttribute('data-infinite-wrapper')
      ) {
        return elm;
      }

      return this.getScrollParent(elm.parentNode);
    }
  }
};