Access to the ScrollPosition in Javascript

How-to Discussions
1

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:

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

JS:

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!

2

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

3

@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:

  <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:

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!