Issue with scroll view and setScrollHeight

If you:

  • create a scroll view (for vertical scrolling only) with widget.newScrollView
  • add any element to it that is below the initial visible area
  • change its scrollable content height with setScrollHeight to something larger than needed for its current content 

, the scroll bar bugs out pretty hard whenever you perform some scrolling. Is there a way around this?

We know what height we need, but the content, images and text, is dynamically (down)loaded and discarded as the player scrolls through the list. It’s a highscore list with tens of thousands entries.

Here’s a tiny example scene that shows the issue:

local composer = require("composer") local widget = require("widget") local scene = composer.newScene() function scene:create( event ) local sceneGroup = self.view -- Create scroll view. local options = {} options.left = 32 options.top = 64 options.width = display.contentWidth - 64 options.height = display.contentHeight - 128 options.horizontalScrollDisabled = true options.verticalScrollDisabled = false scrollView = widget.newScrollView(options) -- Create some text. local text options = {} -- Text at the top. options.text = "Top" options.x = (display.contentWidth - 64)/2 + 8 options.y = 8 options.width = display.contentWidth - 64 options.align = "left" options.font = native.systemFont text = display.newText(options) text:setFillColor(0, 0, 0) scrollView:insert(text) -- Text below the initial visible area. options.text = "Below" options.y = display.contentHeight - 128 + 32 text = display.newText(options) text:setFillColor(0, 0, 0) scrollView:insert(text) -- Set the scroll height to something higher than needed. scrollView:setScrollHeight(display.contentHeight\*2) sceneGroup:insert(scrollView) end function scene:show( event ) end function scene:hide( event ) end function scene:destroy( event ) end scene:addEventListener( "create", scene ) scene:addEventListener( "show", scene ) scene:addEventListener( "hide", scene ) scene:addEventListener( "destroy", scene ) return scene

I did not understand your problem and the code does not show problems.

From what I understand you have to download some images and adapt the scroll.

in this case, do something like(in create scene):

 local sceneGroup = display.newGroup( ) -- Create scroll view. local options = {} options.left = 32 options.top = 64 options.width = display.contentWidth - 64 options.height = display.contentHeight - 128 options.horizontalScrollDisabled = true options.verticalScrollDisabled = false options.backgroundColor = {1, 0, 0,1} scrollView = widget.newScrollView(options) -- Create some text. local text options = {} -- Text at the top. options.text = "Top" options.x = (display.contentWidth - 64)/2 + 8 options.y = 8 options.width = display.contentWidth - 64 options.align = "left" options.font = native.systemFont text = display.newText(options) text:setFillColor(0, 0, 0) scrollView:insert(text) -- Text below the initial visible area. options.text = "Below" options.y = display.contentHeight - 128 + 32 text = display.newText(options) text:setFillColor(0, 0, 0) scrollView:insert(text) -- Set the scroll height to something higher than needed. scrollView:setScrollHeight(display.contentHeight\*2) --utility variable local tmp = text --margin from 1 image to another local margin = 50 --I pretend to download a new image every 5 seconds local function fakeDownload() timer.performWithDelay( 5000, function() --fake new dowloaded image local ransom\_width = math.random(100,200) local random\_height = math.random(20,300) local newDownloadedImage = display.newRect( scrollView.width\*0.5, 0, ransom\_width, random\_height ) newDownloadedImage.y = tmp.y+(tmp.height/2)+(random\_height/2)+margin --update tmp tmp = newDownloadedImage scrollView:insert(newDownloadedImage) scrollView:setScrollHeight( newDownloadedImage.y+(random\_height\*.7) ) end,-1) end fakeDownload() sceneGroup:insert(scrollView)

I did not understand your problem and the code does not show problems.

From what I understand you have to download some images and adapt the scroll.

in this case, do something like(in create scene):

 local sceneGroup = display.newGroup( ) -- Create scroll view. local options = {} options.left = 32 options.top = 64 options.width = display.contentWidth - 64 options.height = display.contentHeight - 128 options.horizontalScrollDisabled = true options.verticalScrollDisabled = false options.backgroundColor = {1, 0, 0,1} scrollView = widget.newScrollView(options) -- Create some text. local text options = {} -- Text at the top. options.text = "Top" options.x = (display.contentWidth - 64)/2 + 8 options.y = 8 options.width = display.contentWidth - 64 options.align = "left" options.font = native.systemFont text = display.newText(options) text:setFillColor(0, 0, 0) scrollView:insert(text) -- Text below the initial visible area. options.text = "Below" options.y = display.contentHeight - 128 + 32 text = display.newText(options) text:setFillColor(0, 0, 0) scrollView:insert(text) -- Set the scroll height to something higher than needed. scrollView:setScrollHeight(display.contentHeight\*2) --utility variable local tmp = text --margin from 1 image to another local margin = 50 --I pretend to download a new image every 5 seconds local function fakeDownload() timer.performWithDelay( 5000, function() --fake new dowloaded image local ransom\_width = math.random(100,200) local random\_height = math.random(20,300) local newDownloadedImage = display.newRect( scrollView.width\*0.5, 0, ransom\_width, random\_height ) newDownloadedImage.y = tmp.y+(tmp.height/2)+(random\_height/2)+margin --update tmp tmp = newDownloadedImage scrollView:insert(newDownloadedImage) scrollView:setScrollHeight( newDownloadedImage.y+(random\_height\*.7) ) end,-1) end fakeDownload() sceneGroup:insert(scrollView)