Polymer paper-scroll-header-panel with iron-scroll-threshold scrolling issue

Question

I have following paper-scroll-header-panel and have iron pages inside main container.

<paper-drawer-panel disable-swipe force-narrow>
        <paper-scroll-header-panel main fixed>
            <paper-toolbar>
                <header-element></header-element>
            </paper-toolbar>
                <div class="main-container">
                    <iron-pages route-target selected="0">
                     .............
                     ............
                    </iron-pages>
                </div>
        </paper-scroll-header-panel>
    </paper-drawer-panel>

and I have iron-scroll-threshold in one of my iron-page element

    <iron-scroll-threshold id="scrollThresholdForProducts"
                           scroll-target="[[getScrollTarget()]]"
                           lower-threshold="100"
                           on-lower-threshold="_loadMoreProducts">
    </iron-scroll-threshold>

The getScrollTarget method looks like this

getScrollTarget: function () {
        var paperScroll = document.querySelector("paper-scroll-header-panel");
        return paperScroll.scroller;
    }

When it reaches the lower thresold it calls _loadMoreProducts. I am clearing threshold trigger once api call returns with data.

scope.$.scrollThresholdForProducts.clearTriggers();

What eventually happens is it resets the scroll to the top. Is there any way to solve this problem?