The reason that this is happening is because when you view your prototype set to fill the width, then you are viewing just a windowed section of the whole frame, and so you are actually scrolling within that dedicated defined area. As such, the scrolling settings you have applied will be in effect.
But if you view your prototype set to 100% scale, then what is actually happening is you have no longer got that same dedicated defined area from before. Instead, the entire length of your frame is set to show, but the bottom section of it is “hidden” under the bottom of your browser window. So now, you are not actually scrolling your prototype, but you are simply panning down the entire length of your tall frame. So the scrolling settings you have applied will not apply here.
It might initially appear to be the same thing, but in the setup of the document, the outcome of scrolling as opposed to just panning gives different results.
I would suggest that you instead define a preset scrolling area for your prototypes so as to avoid these types of issues.
Thanks for the explanation that’s really helpful. I didn’t realise that the prototypes don’t scroll the same way between the two settings.
One reason I came across this was because I was trying to have a page with a scroll element, and also have overlays appear upon click lower down the page.
But the overlays were breaking and not rendering/scrolling correctly if I have the page set to ‘FillWidth’, but worked if I had the page set to ‘FullWidth’.
is there a way to get the overlays working correctly for ‘FillWidth’… not sure if the settings are correct?
On the Scroll Viewport Size setting, you have got the Height set to 6000px. I am guessing this is the height of the Frame? But these Viewport Size settings should not be set to match your Frame, but rather should be set to match the size of the viewing device.
That is to say if you are using the “Extra Large” sized Template, that originally comes in at 1920x1080, then you should use the same Scroll Viewport Size. Even if you make your Frame taller on the Canvas to fit the content that goes below this point, leave the Scroll Viewport Size set to the same original height of 1080.
Here’s a quick demo…
Yes, I had the viewport dimension set to 6000 (the full depth of the page).
Im trying to show the prototype as it would appear in any size browser window and show what a user would see when they are in control of their browser window size. Rather than predefining a fixed size for the viewer.
The fill width setting is great for this because it does give a quick scale effect on the prototype, no matter what depth the viewport and what the browser window is set to.
But then came across a problem with overlays, and finding that having a large overlay that pops up on click, which is deeper than the viewport doesn’t quite work. The scroll stops working over the overlay unless you close the overlay. If you have an overlay larger than the depth then you don’t see it all and get stuck.
Would be great to have scroll active whether there’s an overlay showing or not. I thought the ‘Allow all"‘ setting for the overlay would allow this but no.
Setting your Viewport height to be the full height of your Frame can work in some simpler situations, so then you just end up “panning” down your Frame instead, regardless of the size of your browser window. But as you have seen, it can then break in regard to some settings, such as fixed-position and Overlays.
So in these situations, you will have to define a preset Viewport size to create a fixed-size area in which your prototype can truly scroll, rather than just pan.
However, when it comes to scrolling your prototype when there is a larger Overlay taking up the full view, please note that we do currently have a regression bug that is preventing this from being possible to do. It should be possible and it is in the queue of issues to be resolved. Apologies in the meantime.
Thanks for prompt replies and your insight, it is very helpful in understanding how sketch handles different size viewports and settings. Great support
I think this is the first time I have tried full width overlays to this size, so it was a bit frustrating. Hopefully it can be sorted, and work alongside with scrollable areas
