ScrollView:scrollTo doesn't work correctly

dave.haynes7 · September 22, 2014, 8:41pm

ScrollView:scrollTo(“bottom”) isn’t working properly. It always adds extra padding at the bottom. I’ve seen some similar forum posts but they looked really old, so I’m starting a new one with an easy way to reproduce.

Open the ScrollView sample’s main.lua and add this at the bottom:

timer.performWithDelay(1000, function() &nbsp; &nbsp; scrollView:scrollTo("bottom", {time = 400}) end)

You’ll see what I mean. I’m adding items that need to always show up at the bottom of the scrollview. Upon adding, I’d like to scroll down so the item just added is visible.

I looked through the scrollview code on github too but I couldn’t figure it out yet. Note that tapping the scrollview corrects it. This happens with bottomPadding set to 0 and with isBouceEnabled set to true or false.

Thanks,

Dave

bjsorrentino · September 22, 2014, 9:56pm

Hi Dave,

Can you please post your full widget setup code, and also show when/how you’re adding new things to the bottom and so forth?

Thanks,

Brent

Dave_Haynes · September 23, 2014, 5:31pm

All you have to do is add the code I specified to the very bottom of the scrollview sample that comes with Corona and you will see that it scrolls beyond the “bottom” of the content.

My particular situation is pretty complicated, so I simplified it to reproduce the problem with the scrollview sample.

Dave

Full Code:

-- -- Abstract: Scroll View sample app -- -- Version: 2.0 -- -- Sample code is MIT licensed, see http://www.coronalabs.com/links/code/license -- Copyright (C) 2010 Corona Labs Inc. All Rights Reserved. -- -- Demonstrates how to make text and graphics move up and down on touch, -- or scroll, using the widget libraries scrollView methods. -- -- Supports Graphics 2.0 ------------------------------------------------------------ display.setStatusBar( display.HiddenStatusBar ) local widget = require( "widget" ) -- Our ScrollView listener local function scrollListener( event ) local phase = event.phase local direction = event.direction if "began" == phase then --print( "Began" ) elseif "moved" == phase then --print( "Moved" ) elseif "ended" == phase then --print( "Ended" ) end -- If the scrollView has reached it's scroll limit if event.limitReached then if "up" == direction then print( "Reached Top Limit" ) elseif "down" == direction then print( "Reached Bottom Limit" ) elseif "left" == direction then print( "Reached Left Limit" ) elseif "right" == direction then print( "Reached Right Limit" ) end end return true end -- Create a ScrollView local scrollView = widget.newScrollView { left = 0, top = 0, width = display.contentWidth, height = display.contentHeight, bottomPadding = 50, id = "onBottom", horizontalScrollDisabled = true, verticalScrollDisabled = false, listener = scrollListener, } --Create a text object for the scrollViews title local titleText = display.newText("Move Up to Scroll", display.contentCenterX, 48, native.systemFontBold, 16) titleText:setFillColor( 0 ) -- insert the text object into the created display group scrollView:insert( titleText ) --Create a large text string local lotsOfText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet consectetur euismod. Phasellus non ipsum vel eros vestibulum consequat. Integer convallis quam id urna tristique eu viverra risus eleifend.\n\nAenean suscipit placerat venenatis. Pellentesque faucibus venenatis eleifend. Nam lorem felis, rhoncus vel rutrum quis, tincidunt in sapien. Proin eu elit tortor. Nam ut mauris pellentesque justo vulputate convallis eu vitae metus. Praesent mauris eros, hendrerit ac convallis vel, cursus quis sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum, dui in vehicula dapibus, lorem nisi placerat turpis, quis gravida elit lectus eget nibh. Mauris molestie auctor facilisis.\n\nCurabitur lorem mi, molestie eget tincidunt quis, blandit a libero. Cras a lorem sed purus gravida rhoncus. Cras vel risus dolor, at accumsan nisi. Morbi sit amet sem purus, ut tempor mauris.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet consectetur euismod. Phasellus non ipsum vel eros vestibulum consequat. Integer convallis quam id urna tristique eu viverra risus eleifend.\n\nAenean suscipit placerat venenatis. Pellentesque faucibus venenatis eleifend. Nam lorem felis, rhoncus vel rutrum quis, tincidunt in sapien. Proin eu elit tortor. Nam ut mauris pellentesque justo vulputate convallis eu vitae metus. Praesent mauris eros, hendrerit ac convallis vel, cursus quis sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum, dui in vehicula dapibus, lorem nisi placerat turpis, quis gravida elit lectus eget nibh. Mauris molestie auctor facilisis.\n\nCurabitur lorem mi, molestie eget tincidunt quis, blandit a libero. Cras a lorem sed purus gravida rhoncus. Cras vel risus dolor, at accumsan nisi. Morbi sit amet sem purus, ut tempor mauris. " --Create a text object containing the large text string and insert it into the scrollView local lotsOfTextObject = display.newText( lotsOfText, display.contentCenterX, 0, 300, 0, native.systemFont, 14) lotsOfTextObject:setFillColor( 0 ) lotsOfTextObject.anchorY = 0.0 -- Top --------------------------------lotsOfTextObject:setReferencePoint( display.TopCenterReferencePoint ) lotsOfTextObject.y = titleText.y + titleText.contentHeight + 10 scrollView:insert( lotsOfTextObject ) -- only thing different that I added, just to illustrate the problem: timer.performWithDelay(1000, function() scrollView:scrollTo("bottom", {time = 400}) end)

Dave_Haynes · September 23, 2014, 5:32pm

In case you’re curious – dave.haynes and dave.haynes7 are both me. Work and Personal Corona Pro subscriptions.

bjsorrentino · September 23, 2014, 9:26pm

Hi Dave,

I think this may be a bug which is being investigated/fixed. In the meantime, I was able to get expected results by scrolling to a specific position in the view, using scrollToPosition(), instead of using one of the “presets” via scrollTo().

[lua]

timer.performWithDelay( 1000, function()

scrollView:scrollToPosition

{ y=(scrollView._view.height-scrollView.height+50)*-1, time=400 }

end )

[/lua]

Note that the value of 50 that I added matches the “bottomPadding” value in your setup, so you may adjust that as needed.

Hope this helps,

Brent

bjsorrentino · September 22, 2014, 9:56pm

Hi Dave,

Can you please post your full widget setup code, and also show when/how you’re adding new things to the bottom and so forth?

Thanks,

Brent

Dave_Haynes · September 23, 2014, 5:31pm

All you have to do is add the code I specified to the very bottom of the scrollview sample that comes with Corona and you will see that it scrolls beyond the “bottom” of the content.

My particular situation is pretty complicated, so I simplified it to reproduce the problem with the scrollview sample.

Dave

Full Code:

-- -- Abstract: Scroll View sample app -- -- Version: 2.0 -- -- Sample code is MIT licensed, see http://www.coronalabs.com/links/code/license -- Copyright (C) 2010 Corona Labs Inc. All Rights Reserved. -- -- Demonstrates how to make text and graphics move up and down on touch, -- or scroll, using the widget libraries scrollView methods. -- -- Supports Graphics 2.0 ------------------------------------------------------------ display.setStatusBar( display.HiddenStatusBar ) local widget = require( "widget" ) -- Our ScrollView listener local function scrollListener( event ) local phase = event.phase local direction = event.direction if "began" == phase then --print( "Began" ) elseif "moved" == phase then --print( "Moved" ) elseif "ended" == phase then --print( "Ended" ) end -- If the scrollView has reached it's scroll limit if event.limitReached then if "up" == direction then print( "Reached Top Limit" ) elseif "down" == direction then print( "Reached Bottom Limit" ) elseif "left" == direction then print( "Reached Left Limit" ) elseif "right" == direction then print( "Reached Right Limit" ) end end return true end -- Create a ScrollView local scrollView = widget.newScrollView { left = 0, top = 0, width = display.contentWidth, height = display.contentHeight, bottomPadding = 50, id = "onBottom", horizontalScrollDisabled = true, verticalScrollDisabled = false, listener = scrollListener, } --Create a text object for the scrollViews title local titleText = display.newText("Move Up to Scroll", display.contentCenterX, 48, native.systemFontBold, 16) titleText:setFillColor( 0 ) -- insert the text object into the created display group scrollView:insert( titleText ) --Create a large text string local lotsOfText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet consectetur euismod. Phasellus non ipsum vel eros vestibulum consequat. Integer convallis quam id urna tristique eu viverra risus eleifend.\n\nAenean suscipit placerat venenatis. Pellentesque faucibus venenatis eleifend. Nam lorem felis, rhoncus vel rutrum quis, tincidunt in sapien. Proin eu elit tortor. Nam ut mauris pellentesque justo vulputate convallis eu vitae metus. Praesent mauris eros, hendrerit ac convallis vel, cursus quis sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum, dui in vehicula dapibus, lorem nisi placerat turpis, quis gravida elit lectus eget nibh. Mauris molestie auctor facilisis.\n\nCurabitur lorem mi, molestie eget tincidunt quis, blandit a libero. Cras a lorem sed purus gravida rhoncus. Cras vel risus dolor, at accumsan nisi. Morbi sit amet sem purus, ut tempor mauris.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet consectetur euismod. Phasellus non ipsum vel eros vestibulum consequat. Integer convallis quam id urna tristique eu viverra risus eleifend.\n\nAenean suscipit placerat venenatis. Pellentesque faucibus venenatis eleifend. Nam lorem felis, rhoncus vel rutrum quis, tincidunt in sapien. Proin eu elit tortor. Nam ut mauris pellentesque justo vulputate convallis eu vitae metus. Praesent mauris eros, hendrerit ac convallis vel, cursus quis sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum, dui in vehicula dapibus, lorem nisi placerat turpis, quis gravida elit lectus eget nibh. Mauris molestie auctor facilisis.\n\nCurabitur lorem mi, molestie eget tincidunt quis, blandit a libero. Cras a lorem sed purus gravida rhoncus. Cras vel risus dolor, at accumsan nisi. Morbi sit amet sem purus, ut tempor mauris. " --Create a text object containing the large text string and insert it into the scrollView local lotsOfTextObject = display.newText( lotsOfText, display.contentCenterX, 0, 300, 0, native.systemFont, 14) lotsOfTextObject:setFillColor( 0 ) lotsOfTextObject.anchorY = 0.0 -- Top --------------------------------lotsOfTextObject:setReferencePoint( display.TopCenterReferencePoint ) lotsOfTextObject.y = titleText.y + titleText.contentHeight + 10 scrollView:insert( lotsOfTextObject ) -- only thing different that I added, just to illustrate the problem: timer.performWithDelay(1000, function() scrollView:scrollTo("bottom", {time = 400}) end)

Dave_Haynes · September 23, 2014, 5:32pm

In case you’re curious – dave.haynes and dave.haynes7 are both me. Work and Personal Corona Pro subscriptions.

bjsorrentino · September 23, 2014, 9:26pm

Hi Dave,

I think this may be a bug which is being investigated/fixed. In the meantime, I was able to get expected results by scrolling to a specific position in the view, using scrollToPosition(), instead of using one of the “presets” via scrollTo().

[lua]

timer.performWithDelay( 1000, function()

scrollView:scrollToPosition

{ y=(scrollView._view.height-scrollView.height+50)*-1, time=400 }

end )

[/lua]

Note that the value of 50 that I added matches the “bottomPadding” value in your setup, so you may adjust that as needed.

Hope this helps,

Brent

mariona_dsr · December 29, 2015, 8:21pm

scrollTo(“bottom”), with padding, doesn’t work well still, but Brent’s answer works fine for me! Thank you!

RedBeach · January 23, 2016, 1:50am

Bug still happens. Brent’s code works fine though.

mariona_dsr · December 29, 2015, 8:21pm

scrollTo(“bottom”), with padding, doesn’t work well still, but Brent’s answer works fine for me! Thank you!

RedBeach · January 23, 2016, 1:50am

Bug still happens. Brent’s code works fine though.