# Access to the ScrollPosition in Javascript

**URL:** <https://forums.fusetools.com/t/access-to-the-scrollposition-in-javascript/6900>\
**Category:** How-to Discussions\
**Created:** [September 10, 2015, 8:45pm UTC](https://forums.fusetools.com/t/access-to-the-scrollposition-in-javascript/6900 "2015-09-10T20:45:29Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Cristian\_Karmy1](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/cristian_karmy1/32/480_2.png) [@Cristian\_Karmy1](https://forums.fusetools.com/u/Cristian_Karmy1)\
**Post date:** [September 10, 2015, 8:45pm UTC](https://forums.fusetools.com/t/access-to-the-scrollposition-in-javascript/6900/1 "2015-09-10T20:45:29Z")

</div>

Hi,

I’m trying to access in javascript to the scrollPosition value of a ScrollViewer when I click a Button. But I obtain a null debug…

Here is my code:

UX:

```auto
<ScrollViewer ScrollPosition="{ScrollPosition}">
    ....
</ScrollViewer>
<Button >
    <Clicked Handler="{ClickFunction}" />
</Button>

```

JS:

```auto
var Observable = require("FuseJS/Observable");
var ScrollPosition = Observable();

function ClickFunction(){
    debug_log(ScrollPosition.value);
}

module.exports = {
    ScrollPosition: ScrollPosition,
    ClickFunction: ClickFunction
};

```

How can achieve this?

Thanks!

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [September 15, 2015, 10:37am UTC](https://forums.fusetools.com/t/access-to-the-scrollposition-in-javascript/6900/2 "2015-09-15T10:37:06Z")

</div>

Hi, sorry for the wait.

You can databind ScrollPosition like so:

ux: `<ScrollViewer ScrollPosition="{scrollPos}">`

js: `var scrollPos = Observable([0,40]);`

This lets you at least set the scrollposition from JS, but it doesn’t seem to work the other way, meaning the observable isn’t being updated when scrolling.

I’ll investigate some more on this

---

<div class="post-metadata">

**Author:** ![Cristian\_Karmy1](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/cristian_karmy1/32/480_2.png) [@Cristian\_Karmy1](https://forums.fusetools.com/u/Cristian_Karmy1)\
**Post date:** [September 15, 2015, 2:06pm UTC](https://forums.fusetools.com/t/access-to-the-scrollposition-in-javascript/6900/3 "2015-09-15T14:06:37Z")

</div>

@Kristian Hasselknipe help me and I solve my problem. I want to call a function in javascript when my ScrollViewer reach the end or reach his max position of the Scroll position loading more elements in the scrollViewer.

Here is the code:

In UX:

```auto
  <App Theme="Basic" ClearColor="#eeeeeeff">
    <Panel>
        <DockPanel>
            <JavaScript File="MainView.js"/>
            <Rectangle Dock="Right" Width="50">
                <SolidColor ux:Name="color" Color="#f00"/>
            </Rectangle>
            <ScrollViewer>
            <StackPanel>
                <StackPanel>
                    <Each Count="20">
                        <Rectangle Height="100" Fill="#f0f" Margin="5"/>
                    </Each>
                </StackPanel>
                <StackPanel>
                    <Text Value="End!" TextColor="#000" FontSize="30" />
                </StackPanel>
            </StackPanel>

                <WhileScrollable ScrollDirections="Down" Invert="true">
                    <Callback Handler="{yourJSFunction}"/>
                </WhileScrollable>
            </ScrollViewer>
    </DockPanel>

    </Panel>
</App>

```

Js:

```auto
var Observable = require('FuseJS/Observable');

function yourJSFunction() {
    debug_log("End of the ScrollPosition!");
}

module.exports = {
    yourJSFunction: yourJSFunction
};

```

It will be very usefull to read values like ScrollPosition in JavaScript to do thinks like that.

Thanks!