Preventing white borders to appear on a ScrollView

Getting Started Newbie Questions
#1

Hi!

I’m new to Corona and I was wondering how I should prevent white bars to appear when you drag a scrollview too far. On one project I managed to do it by setting a negative bottomPadding, but that is probably not the way it was intended.

Here is an example:

local scrollView = widget.newScrollView     { -- i want to cover all the screen         x = display.contentCenterX,         y = display.contentCenterY,         width = display.contentWidth,         height = display.contentHeight, -- size of background image         scrollWidth = 800,         scrollHeight = 1200,         topPadding = 0,         bottomPadding = 0,     }     sceneGroup:insert( scrollView )     local background = display.newImageRect( sceneGroup, "testBackground.png", 800, 1200 )     -- position to the middle background.x = 400     background.y = 600     scrollView:insert( background )

When I scroll the image, I cant go out of the 1200x800 image and see a white border. When I release, the scroll goes back to the bottom of the image and the white zone is hidden. I would like the scroll to stop at the end of the 1200x800 image, so no blank zone would be visible.

What am I doing wrong ? :smiley:

Thanks,

Ben

#2

I haven’t found an elegant solution to this yet.

You can also add the following line to illustrate the problem: a big white margin appears, and disappear when you touch the screen.

scrollView:scrollTo(“bottom”, {time = 100})

#3

Display groups are all about layers, so what you are seeing is a blank canvas behind the scrollview. You might want to try inserting the background image in to your main display group first, then insert the scrollview. Right now you are inserting the background I to the scrollview. If that background image is meant to scroll, then first add another background color/ image in the scene display group, etc…

#4

Thanks for your answer.

Yes, I want the background to scroll.

Placing a fixed background in the scene does not change anything because the scrollview takes all the screen, i could change the color of the blank zones with backgroundColor, but i would rather see them disappear.

#5

Have you tried the isBounceEnabled = false setting?  http://docs.coronalabs.com/api/library/widget/newScrollView.html#TOC

Rob

#6

Thanks Rob, that is exactly what I was looking for! I must have missed it while reading the docs.

The issue is still there if I do scrollView:scrollTo(“bottom”, {time = 100}), there is a blank zone that disappears when you scroll, but this shouldn’t be a problem for the use I intend.

#7

You can also hide the background of the scrollView, or just change the background color to transparent, if you still want the “bounce” effect but you don’t want to see the white (default) background:

http://docs.coronalabs.com/api/library/widget/newScrollView.html

Take care,

Brent

#8

Thanks Brent.

There is still the issue when using scrollView:scrollTo(“bottom”, {time = 100}), even with isBounceEnabled = false, it scrolls too far away and the margin is visible until the first touch makes it disappear.

I can use scrollToPosition() to prevent this, but I d’like to understand how scrollTo() works.

Ben

#9

Hi Ben,

Can you post your current scrollView code and setup?

#10

Sure, here it is:

local widget = require( "widget" ) local scrollView = widget.newScrollView { x = display.contentCenterX, y = display.contentCenterY, width = display.contentWidth, height = display.contentHeight, scrollWidth = 800, scrollHeight = 1200, isBounceEnabled = false } local background = display.newImageRect( "testBackground.png", 800, 1200 ) background.x = 400 background.y = 600 scrollView:insert( background ) scrollView:scrollTo("bottom", {time = 100})

Here is a .zip file with all the files.

I’m using build: 2014.2359

#11

Hi Ben,

I tested this and it appears to be a bug. I have submitted a bug report to the engineering team. In the meantime, I suggest you use the method that’s working (scrollToPosition). Thanks for bringing this to our attention.

Brent

#12

I haven’t found an elegant solution to this yet.

You can also add the following line to illustrate the problem: a big white margin appears, and disappear when you touch the screen.

scrollView:scrollTo(“bottom”, {time = 100})

#13

Display groups are all about layers, so what you are seeing is a blank canvas behind the scrollview. You might want to try inserting the background image in to your main display group first, then insert the scrollview. Right now you are inserting the background I to the scrollview. If that background image is meant to scroll, then first add another background color/ image in the scene display group, etc…

#14

Thanks for your answer.

Yes, I want the background to scroll.

Placing a fixed background in the scene does not change anything because the scrollview takes all the screen, i could change the color of the blank zones with backgroundColor, but i would rather see them disappear.

#15

Have you tried the isBounceEnabled = false setting?  http://docs.coronalabs.com/api/library/widget/newScrollView.html#TOC

Rob

#16

Thanks Rob, that is exactly what I was looking for! I must have missed it while reading the docs.

The issue is still there if I do scrollView:scrollTo(“bottom”, {time = 100}), there is a blank zone that disappears when you scroll, but this shouldn’t be a problem for the use I intend.

#17

You can also hide the background of the scrollView, or just change the background color to transparent, if you still want the “bounce” effect but you don’t want to see the white (default) background:

http://docs.coronalabs.com/api/library/widget/newScrollView.html

Take care,

Brent

#18

Thanks Brent.

There is still the issue when using scrollView:scrollTo(“bottom”, {time = 100}), even with isBounceEnabled = false, it scrolls too far away and the margin is visible until the first touch makes it disappear.

I can use scrollToPosition() to prevent this, but I d’like to understand how scrollTo() works.

Ben

#19

Hi Ben,

Can you post your current scrollView code and setup?

#20

Sure, here it is:

local widget = require( "widget" ) local scrollView = widget.newScrollView { x = display.contentCenterX, y = display.contentCenterY, width = display.contentWidth, height = display.contentHeight, scrollWidth = 800, scrollHeight = 1200, isBounceEnabled = false } local background = display.newImageRect( "testBackground.png", 800, 1200 ) background.x = 400 background.y = 600 scrollView:insert( background ) scrollView:scrollTo("bottom", {time = 100})

Here is a .zip file with all the files.

I’m using build: 2014.2359