Zynga Scroller - Set a starting offset for a scrollable area

Question

Anyone familiar with the Zynga Scroller JS library?

How do I set a default offset for a scrollable region?

I set the CSS for the element using:

-webkit-transform' : 'translate3d(200px, 0px, 0) scale(1)

Assuming I want a 200px offset for the scrollable region, but the code overwrites this upon page load, and snaps back to 0px. When I hard code the 200px offset, it then thinks that 200px is the starting position and bounces back as if it were the edge.

Any help?

Answer 1

I had the same issue in a way and I will describe it below along with the solution.

I work on an "infinite horizontal scroller" with elements equal in size. The idea is that you will only have nrVisibleElements + 2 elements in the DOM. 1 is before your scroll window and the second is after it. The first and last elements swap according to the moving direction. You can find the library here: https://github.com/bedeabza/JS-Infinite-Scroller

Now, I want to use snapping for elements, but if I activate snapping, ZyngaScroller will snap right before I append the swapped element because it thinks my container will end. That's why I reported to it a bigger container (1000 * actualDimension) with the setDimensions() method and offset'ed my dimension processing with 500 * actualDimension.

Basically every time I set the actual transform on the DOM I offset it with the following method:

offset: function (left) {
    return left + this.offsetValue;
},

Where left is the left reported by ZyngaScroller.