# How to match two seperate ScrollView positions

**URL:** <https://forums.fusetools.com/t/how-to-match-two-seperate-scrollview-positions/5653>\
**Category:** How-to Discussions\
**Created:** [January 7, 2016, 5:47pm UTC](https://forums.fusetools.com/t/how-to-match-two-seperate-scrollview-positions/5653 "2016-01-07T17:47:03Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Elliot\_Geno](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/elliot_geno/32/507_2.png) [@Elliot\_Geno](https://forums.fusetools.com/u/Elliot_Geno)\
**Post date:** [January 7, 2016, 5:47pm UTC](https://forums.fusetools.com/t/how-to-match-two-seperate-scrollview-positions/5653/1 "2016-01-07T17:47:03Z")

</div>

I would like to have a grid that has two vertically scrollable StackPanels side by side horizontally. When I scroll one of the StackPanels, I need to be able to set the ScrollPosition of the other.

---

<div class="post-metadata">

**Author:** ![Vegard\_Strand\_Lende](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/vegard_strand_lende/32/349_2.png) [@Vegard\_Strand\_Lende](https://forums.fusetools.com/u/Vegard_Strand_Lende)\
**Post date:** [January 8, 2016, 9:53am UTC](https://forums.fusetools.com/t/how-to-match-two-seperate-scrollview-positions/5653/2 "2016-01-08T09:53:43Z")

</div>

Hi!

Good question, do you need both ScrollViews to modify each others ScrollPosition or just one that modify the other? Off the top of my head this can be done:

```auto
<App Theme="Basic" Background="#eeeeeeff">
    <ClientPanel>
        <Grid ColumnCount="2" RowCount="1">
            <ScrollView Background="#fb0">
                <ScrollingAnimation>
                    <Change Target="_sv.ScrollPosition" Value="0,500" />
                </ScrollingAnimation>
            </ScrollView>
            <ScrollView ux:Name="_sv" />
        </Grid>
    </ClientPanel>
</App>

```

Not sure if that does if for you, since you have to specify the absolute value you want the ScrollPosition to go to in the `<Change />`. Adding some Uno code here might do the trick 🙂

Let me know what you think

---

<div class="post-metadata">

**Author:** ![Elliot\_Geno](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/elliot_geno/32/507_2.png) [@Elliot\_Geno](https://forums.fusetools.com/u/Elliot_Geno)\
**Post date:** [January 8, 2016, 3:30pm UTC](https://forums.fusetools.com/t/how-to-match-two-seperate-scrollview-positions/5653/3 "2016-01-08T15:30:12Z")

</div>

If both ScrollViews are the same size, wouldn’t it match the other side? Ideally, we’d have something like this:

```auto
<ScrollView ux:Name="layers">
    <ScrollingAnimation>
        <Change Target="timeline.ScrollPosition" Value="layers.ScrollPosition" />
    </ScrollingAnimation>
</ScrollView>

<ScrollView ux:Name="timeline" >
    <ScrollingAnimation>
        <Change Target="layers.ScrollPosition" Value="timeline.ScrollPosition" />
    </ScrollingAnimation>
</ScrollView>

```

---

<div class="post-metadata">

**Author:** ![Elliot\_Geno](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/elliot_geno/32/507_2.png) [@Elliot\_Geno](https://forums.fusetools.com/u/Elliot_Geno)\
**Post date:** [January 8, 2016, 3:32pm UTC](https://forums.fusetools.com/t/how-to-match-two-seperate-scrollview-positions/5653/4 "2016-01-08T15:32:54Z")

</div>

Is there a way to bind the values together bi-directionaly within UX?

---

<div class="post-metadata">

**Author:** ![edA-qa\_mort-ora-y](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eda-qa_mort-ora-y/32/124_2.png) [@edA-qa\_mort-ora-y](https://forums.fusetools.com/u/edA-qa_mort-ora-y)\
**Post date:** [January 8, 2016, 4:09pm UTC](https://forums.fusetools.com/t/how-to-match-two-seperate-scrollview-positions/5653/5 "2016-01-08T16:09:29Z")

</div>

Do you intend on having the StackPanel’s be different sizes? Otherwise you can just stick a grid in the ScrollView and have it scroll.