Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Scroll View Content Position

Hi,

I have a scrollview which displays content vertically. Is there a property which lets me determine the y position of content (in the same way as I might set its height with contentHeight)?

Cheers
Mark

— asked August 20th 2010 by Mark Peace
  • scrollview
0 Comments

4 Answers

  • contentOffset does not help ?

    take care it's an object so you'll need

    the_scroll.contentOffset.x
    
    the_scroll.contentOffset.y
    
    — answered August 21st 2010 by Dan Tamas
    permalink
    1 Comment
    • contentOffset is undefined. See here for the solution: http://developer.appcelerator.com/question/54471/scroll-view-content-position.html#answer-252185

      — commented December 5th 2012 by Robin Stoker
  • I tried to use this proporties, but it comes an exception: scrollView.contentOffset is not an object

    Here my code:

    var win = Titanium.UI.currentWindow;
    var scrollView = Titanium.UI.createScrollView({
        contentWidth:'auto',
        contentHeight:'auto',
        top:0,
        bottom:50,
        maxZoomScale:30,
        minZoomScale:1
    });
    
    var view = Ti.UI.createView({
        backgroundImage:'../images/swasi.jpg',
        width:'100%',
        height:500,
    });
    
    view.addEventListener('click',function(event){
        var W = 1809; // Dimension of image
        var H = 2187; // ..
        var x = W* (event.x + scrollView.contentOffset.x)/scrollView.width/scrollView.scale;
        var y = H* (event.y + scrollView.contentOffset.y)/scrollView.height/scrollView.scale;
        label.text= 'x='+parseInt(x) + "\ny=" +parseInt(y);
    
    });
    var label = Ti.UI.createLabel({height:50,bottom:0,text:'--'});
    win.add(label);
    scrollView.add(view);
    win.add(scrollView);
    win.open();
    

    In the demo I'am using this proporty in the callback. I dont know why it should be an error.

    Best regards
    Rainer

    — answered July 7th 2011 by Rainer Schleevoigt
    permalink
    0 Comments
  • For me, contentOffset is undefined. The top and rect.y properties for both the scrollview and it's child objects are not going to help us here either. The solution is to use the scroll event like so:

    var scrollview = Ti.UI.createScrollView();
    
    function scrollview_scroll_handler(e)
    {
        // e.y contains the current top y position of the contents of the scrollview
    
        Ti.API.info('Scrollview contents y offset: '+e.y);
    }
    scrollview.addEventListener('scroll', scrollview_scroll_handler);
    

    Hope this helps someone :)

    — answered December 5th 2012 by Robin Stoker
    permalink
    3 Comments
    • Hi Robin,

      Do you know an idea for applying lazy loading for a scrollview? I have a scrollview that loads 10 photos at first. Then if user scroll to end of the view, I will append more views to that. But, how does we know the user reach to the end of scrollview in coding?
      Thanks,
      Luan

      — commented December 8th 2012 by Luan Nguyen
    • I would do something like:

      1. Get the height of the scrollview contents.
      2. Subtract the height of the scrollview.
      3. If e.y (from my answer above) is greater than the value calculated in steps 1 and 2, then load the next 10 items.

      The reason for step 2 is because e.y represents the position of the top of the scrollview relative to the scrollview's contents.

      On Android, since you cannot scroll past the bottom of the scrollview (as seen on iOS), I would also subtract some small arbitrary value during step 2. This value would act like a threshold in the sense that when you scroll to 10 pixels (for example) from the bottom, it must start loading.

      Good luck, I hope this helps …

      — commented December 11th 2012 by Robin Stoker
    • @Luan, just another tip … if you are using dp units in your app (for Android UI scaling purposes) then you can get the actual height in pixels (which is what you want) by using the rect.height property on your objects.

      For example: scrollview.rect.height

      Just be aware that the rect property is only set after the object has been rendered on the screen. Prior to that, this property will be undefined.

      — commented December 11th 2012 by Robin Stoker
  • I could not get the contentOffset property or the getContentOffset method to work. I ended up creating a variable in which to store the Y value during the scroll event. When the scroll event stops the final value of Y is stored in the variable and accessible when needed. Hope this helps.

    — answered January 25th 2015 by Paul Bauer
    permalink
    0 Comments
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.