How can use infinite loading within a split pane so that handler is triggered at bottom of pane.

[matsch01]

I've implemented your hacker news example as a vue component and I'm trying to place this component inside a pane (of a parent component) using https://antoniandre.github.io/splitpanes/.

HackerNews component template

<template>
  <div class="hacker-news">
    <div class="container">
      <header class="hacker-news-header">
        <a target="_blank" href="http://www.ycombinator.com/">
          <img src="https://news.ycombinator.com/y18.gif">
        </a>
        <span>Hacker News</span>
      </header>
      <div class="infinite-wrapper"  v-for="(item, $index) in list"
        :key="$index"
        :data-num="$index + 1">
        <a target="_blank" :href="item.url" v-text="item.title"></a>
        <p>
          <span v-text="item.points"></span>
          points by
          <a
            target="_blank"
            :href="`https://news.ycombinator.com/user?id=${item.author}`"
            v-text="item.author"></a>
          |
          <a
            target="_blank"
            :href="`https://news.ycombinator.com/item?id=${item.objectID}`"
            v-text="`${item.num_comments} comments`"></a>
        </p>
      </div>
    </div>
    <infinite-loading @infinite="infiniteHandler" force-use-infinite-wrapper=".infinite-wrapper">
      <div class="text-red" slot="no-more">No more users</div>
      <div class="text-red" slot="no-results">No more users</div>
    </infinite-loading>
  </div>
</template>

<style scoped lang="scss">
.hacker-news {
  overflow: scroll;
  height: 100%;
}
</style>

Parent component template

<template>
  <div class="hello">
    <splitpanes class="default-theme" horizontal style="height:500px" :push-other-panes="true">
      <pane max-size="250">
        <hacker-news></hacker-news>
      </pane>
      <pane max-size="250">2</pane>
    </splitpanes>
  </div>
</template>

It renders like this:

The problem is that the handler is not triggered when I scroll to the bottom of the pane. However, if I make the pane large enough to expand beyond the bottom of the page, then the handler is triggered (presumably because the window scroll event is fired).

My understanding is that the handler should be triggered by the scroll event of a parent.

What is required so that the handler is trigged by the scroll event inside the pane?

Solved

The issue was related to the 'force-use-infinite-wrapper' attribute. The matching element is used as the parent. Removing this and simplifying the template allowed for finding the parent with the overflow scroll setting:

<template>
  <div class="hacker-news" >
      <header class="hacker-news-header">
        <a target="_blank" href="http://www.ycombinator.com/">
          <img src="https://news.ycombinator.com/y18.gif">
        </a>
        <span>Hacker News</span>
      </header>
      <div class="infinite-wrapper" v-for="(item, $index) in list"
        :key="$index"
        :data-num="$index + 1">
        <a target="_blank" :href="item.url" v-text="item.title"></a>
        <p>
          <span v-text="item.points"></span>
          points by
          <a
            target="_blank"
            :href="`https://news.ycombinator.com/user?id=${item.author}`"
            v-text="item.author"></a>
          |
          <a
            target="_blank"
            :href="`https://news.ycombinator.com/item?id=${item.objectID}`"
            v-text="`${item.num_comments} comments`"></a>
        </p>
      </div>
      <infinite-loading @infinite="infiniteHandler" >
        <div class="text-red" slot="no-more">No more users</div>
        <div class="text-red" slot="no-results">No more users</div>
      </infinite-loading>
  </div>
</template>

<style scoped lang="scss">
.hacker-news {
  overflow: scroll;
  height: 100%;
}
</style>

[matsch01]

Solution provided above.