Embedded scrollview linking Example - Question

[omasri]

I'm trying to recreate the apple ticker card in the linked scrollview example, I have everything working except I can't figure out how to keep the top surface fixed like in the example. When I scroll up the surfaces on the parent scrollview scroll out of view.

[IjzerenHein]

Could you share the code that you have so I can understand what you are talking about?
Cheers

[omasri]

I didn't find a CDN for your library, so can't show you a working version but below is a snippet. Nothing special there. Just the code from your example

https://github.com/IjzerenHein/famous-flex/blob/master/tutorials/FlexScrollView/scrollview-linking.gif

The code below

1. creates a main flexscrollview with the pull to refresh header
2. adds a surface [275,100] to the main flexscrollview
3. creates an embeddedscrollview with leadingScrollView set to the one defined in (1)
4. Adds a 4 [275,100] surfaces to the embedded scrollview

Everything works as per your example gif, except that the top surface also scrolls out of view. In your GIF the top surface doesn't completely vanish as you scroll up so see the items in the embedded sub scrollview.

    this.scrollView = new FlexScrollView({
        autoPipeEvents: true,
                    flow: true,
        //alignment: 1,
        mouseMove: true,
        debug: false,
        pullToRefreshHeader: new RefreshLoader({
            size: [undefined, 60],
            pullToRefreshFactor: .75,
            pullToRefresh: true,
            color: 'green',
            backgroundColor: 'white',
            particleCount: 10,
            particleSize: 5
        }),
    });

    this.scrollView.on('refresh', function(event) {
        Timer.setTimeout(function() { 
            that.scrollView.hidePullToRefresh();
        }, 200);
    });

    this.scrollView.push(new Surface({
        size: [275,100],
        content: 'top pane',
        properties: { paddingLeft:'5pt',

                    backgroundColor:'rgb(236, 236, 236)'}
    }));

    // Add embedded scrollview
    var embeddedScrollView = new FlexScrollView({
        autoPipeEvents: true,
        leadingScrollView: this.scrollView
    });

    this.scrollView.push(embeddedScrollView, undefined, false);
    embeddedScrollView.push(new Surface({
        size: [275, 100],
        content: 'sub surface 1',
        properties: { backgroundColor:'red'}
    }));
    embeddedScrollView.push(new Surface({
        size: [275, 100],
        content: 'sub surface 2',
        properties: { backgroundColor:'red'}
    }));

    embeddedScrollView.push(new Surface({
        size: [275, 100],
        content: 'sub surface 2',
        properties: { backgroundColor:'red'}
    }));

    embeddedScrollView.push(new Surface({
        size: [275, 100],
        content: 'sub surface 3',
        properties: { backgroundColor:'red'}
    }));

    this.contentContainer = new ContainerSurface({
        size:[275,300],
                properties: {
                    overflow: 'hidden'
                }
            });
    this.contentContainer.add(this.scrollView);

[Benmidi]

I would love to know how this works as well. I've tried a few different things with no success.

[IjzerenHein]

I'll make a working example for this, possibly tomorrow