CODEWITHSUNDEEP
famo.us
Jens Zastrow
Jens Zastrow

Reputation: 297

How to set Scrollview position?

I try to scroll a scroll view to a certain position by setPosition(x). For a short moment the scroller moves scroll area to the correct position, but bounces immediately back. How to do this right?

Upvotes: 1

Views: 322

Answers (3)

Luca
Luca

Reputation: 558

Set the option on the scrollview. It is the size of the area (in pixels) that Scrollview will display content in.

Scrollview that spans 400px:

scrollview.setOptions({
    clipSize: 400,
});

Scrollview that spans your entire context:

scrollview.setOptions({
    clipSize: mainContext.getSize()[1],
});

Upvotes: 0

kobra
kobra

Reputation: 150

With Famo.us 0.3, it seems to be working like this.

Let's say that:

  • My scrollview's display area is 250 pixels in height
  • The contents of my scrollview are total of 1000 pixels in height
  • I want to scroll to the very bottom of the scrollview

The code:

// Scrollview area height 250 pixels
var myScrollviewArea = 250;

// My scrollview contents' total height 1000 pixels
var myScrollviewContents = 1000;

// Contents - Area = total pixels to scroll
var scrollpx = myScrollviewContents - myScrollviewArea;

// Setting scrollview to use the first element as offset origin
myScrollview.getOffset(1);

// Setting scroll position with setOffset()
myScrollview.setOffset(scrollpx);

UPDATE

The above code seems to work very randomly, because the offset index changes.

Here's some updated code, still a bit twitchy but works:

function _scrollToBottom() {
    if(myScrollviewSurfaces) {
        // Pixels to scroll
        var scrollpx = 0;

        // Current first visible element
        var index = myScrollview.getCurrentIndex();

        // Offset from the top of the index
        var offset = myScrollview.getOffset();

        // Calculating the distance from index to bottom
        for(var i = index; i < myScrollviewSurfaces.length; i++) {
            scrollpx = scrollpx + myScrollviewSurfaces[index].getSize(true)[1];
        }
        if(offset > 0) {
            scrollpx = scrollpx - offset;
        }
        scrollpx = scrollpx - myScrollview.getSize(true)[1]; 

        if(scrollpx > 0) {
            myScrollview.setVelocity(1);
            myScrollview.setPosition(scrollpx);
        }
    }
}

Upvotes: 1

Jens Zastrow
Jens Zastrow

Reputation: 297

I got it now. The Scrollview adds a spring to the particle. When moving only the particle, the spring moves it back to it anchor. Setting the the spring-anchor to same position fixes the problem.

scrollview.setPosition(x)
scrollview.spring.setAnchor(x)

Upvotes: 0

Related Questions