Multiple Polymer iron-scroll-threshold to load more data AND detect element visibility

Question

I have a custom element which displays a list of messages.

There is one iron-scroll-threshold wrapping an iron-list which has the task of loading new messages as the user scrolls down:

<div class="container">
    <iron-scroll-threshold id="t" lower-threshold="500" on-lower-threshold="_ld">
        <iron-list items="[[messages]]" as="m" scroll-target="t">
            <template>
                <div>
                    <!-- Messages markup here -->
                </div>
            </template>
        </iron-list>
    </iron-scroll-threshold>
</div>

That works fine.

I need a second kind of scroll-listener to mark messages as read as soon as they become visible (scrolled into the viewport). This should happen independently from loading new messages.

Is it possible to add a second iron-scroll-threshold for that purpose or is there a better way to achieve that?

Edit

I have tried to put an on-content-scroll on several elements but the event never get's fired.

score 1 · Answer 1 · answered Mar 06 '17 at 20:54

1

I believe it's possible by not wrapping the iron-list with the iron-scroll-threshold element & using the scroll-target attribute of iron-scroll-threshold. So something like this:

<div class="container">
    <iron-scroll-threshold id="t1" scroll-target="list" lower-threshold="500" on-lower-threshold="_ld"/>
    <iron-scroll-threshold id="t2" scroll-target="list" lower-threshold="500" on-lower-threshold="_ld2"/>
    <iron-list id="list" items="[[messages]]" as="m">
        <template>
            <div>
                <!-- Messages markup here -->
            </div>
        </template>
    </iron-list>
</div>

I'm not 100% that there won't be some kind of unexpected interaction having multiple iron-scroll-thresholds...but I don't see anything with a quick look through the source.

answered Mar 06 '17 at 20:54

sfeast

956
5
7

Thanks, that looks good. I tried it :) Both _ld and _ld2 are fired when the element is initially loaded (note that the initial loading is also the case if only one iron-scroll-threshold is present), which is strange anyway. Then when I scroll, only _ld is fired, and _ld2 never. – yglodt Mar 06 '17 at 21:43
Sounds like there may be some interactions happening that I didn't expect when scanning the code. I can't investigate further right now (eg no time) but seems like a reasonable bug to file on the iron-scroll-threshold repo - https://github.com/PolymerElements/iron-scroll-threshold – sfeast Mar 07 '17 at 19:08

score 0 · Answer 2 · edited May 23 '17 at 10:29

You know also not sure the above would be the best approach anyways for what you want to do... Another approach might be something using getBoundingClientRect, along the lines of How to tell if a DOM element is visible in the current viewport?, but since the context here involves iron-list, which is a virtual list, this is not straightforward.

iron-list list does have two getters which appear to be public named firstVisibleIndex & lastVisibleIndex so a rough thought is that you could check if your messages are within that range occasionally as the user scrolls.

Multiple Polymer iron-scroll-threshold to load more data AND detect element visibility

2 Answers2