[question] iron-scroll-spy not working inside other element?

[ottigerb]

Issue

I can't make your iron-scroll-spy to act as expected inside my my-patient element.

Questions

• Is {{scrollSelected}}set by the paper-menu: Yes. {{scrollSelected}} contains the id of the selected section.

• I guess I have trouble with the // manually attach the scroll-target because paper-header-panel doesn't notify his scroller. The scroller - as far I understand it - is done in the root of this element. No clue here.

• Also no luck by experimenting with scroll-target.

• Did I missed something?

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/optinomic-title/optinomic-title.html">
<link rel="import" href="../bower_components/iron-scroll-spy/iron-scroll-spy.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-item/paper-item-body.html">
<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../bower_components/paper-menu/paper-submenu.html">
<link rel="import" href="styles-shared.html">
<dom-module id="my-patient">
    <template id="scope">
        <style include="shared-styles">
        :host {
            display: block;
        }
        
        #autoScrollSpy div {
            padding: 150px;
            border-bottom: 1px solid grey;
            transition: background 0.2s;
        }
        </style>
        <app-location route="{{route}}"></app-location>
        <app-route route="{{route}}" pattern="/patient/:pid" data="{{data}}" tail="{{subroute}}"></app-route>
        <div id="headerPanel">
            <paper-menu id="tree_menu" class="tree_container">
                <iron-selector selected="{{scrollSelected}}" role="navigation">
                    <paper-item>Section A</paper-item>
                    <paper-item>Section B</paper-item>
                    <paper-item>Section C</paper-item>
                    <paper-item>Section D</paper-item>
                    <paper-item>Section E</paper-item>
                    <paper-item>Section F</paper-item>
                    <paper-item>Section G</paper-item>
                    <paper-item>Section H</paper-item>
                </iron-selector>
            </paper-menu>
            <iron-auto-scroll-spy selected="{{scrollSelected}}" id="autoScrollSpy">
                <div>
                    <h1>Section A</h1> </div>
                <div>
                    <h1>Section B</h1> </div>
                <div>
                    <h1>Section C</h1> </div>
                <div>
                    <h1>Section D</h1> </div>
                <div>
                    <h1>Section E</h1> </div>
                <div>
                    <h1>Section F</h1> </div>
                <div>
                    <h1>Section G</h1> </div>
                <div>
                    <h1>Section H</h1> </div>
            </iron-auto-scroll-spy>
        </div>
        <div class="app-content-container">
            <div class="app-content-container-controls">
                <paper-icon-button icon="my-icons:help-outline" on-tap="_logState"></paper-icon-button>
            </div>
            <div class="app-content-container-content">
                
                <h2>ToDo: {{scrollSelected}}</h2>
                <p>1.) Drag & Drop stuff you want to see for this page.</p>
                <p>2.) Drag & Drop areas for all roles.</p>
            </div>
        </div>
    </template>
    <script>
    Polymer({
        is: 'my-patient',

        properties: {
            routeData: {
                type: Object,
                observer: '_pageChanged',
            }


        },

        _pageChanged: function() {
            // Save Current Route in Store
            var routeObj = {
                "route": this.route,
                "data": this.routeData,
                "tail": this.subroute
            };

            console.log('(!!!) _routePageChanged: ', routeObj);

            this.pid = this.routeData.pid;
        },

        ready: function() {
            // this._pageChanged();
        },

    });
    </script>
    <script>
    var scope = document.getElementById("scope");
    // manually attach the scroll-target because paper-header-panel doesn't notify his scroller.
    scope.$.autoScrollSpy.scrollTarget = scope.$.headerPanel.scroller;
    </script>
</dom-module>

Thanks

Thanks for any helpful suggestions! Because I really would like to use this!

[Zecat]

Your import seems wrong, using <iron-auto-scroll-spy> you should import

<link rel="import" href="../bower_components/iron-scroll-spy/iron-auto-scroll-spy.html">

insead of

<link rel="import" href="../bower_components/iron-scroll-spy/iron-scroll-spy.html">

[ottigerb]

Thank you for your answer - I looks I did a lot of try&error with iron-scroll-spy vs. iron-auto-scroll-spy. Anyway: Didn't solved my issue.

My current app tree looks something like:

- app
--- patients
----- patient-info

The code above is the patient-info element. The scrolling region is coming from app - as far I understand / looks like:

<app-header-layout id="app_header_main" fullbleed has-scrolling-region>
    <app-header>
     ...
    </app-header>
 </app-header>
<div id="scrollingRegion">


--- patients
----- patient-info

</div>

Do I have to set autoScrollSpy.scrollTarget? How to "reference" scope.$.scrollingRegion inside app element? In short - do I need something like this & how to 'modify':

<script>
          var scope = document.getElementById("scope");
          // manually attach the scroll-target because paper-header-panel doesn't notify his scroller.
          scope.$.autoScrollSpy.scrollTarget = scope.$.headerPanel.scroller;
</script>

Thanks! 👍

[Zecat]

Hi, sorry for my very late answer!

To find the scroller element using <app-header-layout>, check out this line.

You should be ok with:

scope.$.autoScrollSpy.scrollTarget = scope.$.app_header_main.header.scrollTarget;

Or, if you just set a height to the <iron-auto-scroll-spy> you don't even need to define a scrollTarget. The element's default scroll target is itself.