Copy link to clipboard
Copied
Steps to reproduce:
1. Create an artboard taller than the viewport height (simulating a vertical scrolling mobile experience)
2. Create a group intended for horizontal scrolling within the viewport area
3. Apply the Horizontal Scroll option in the sidebar (optional: preview to ensure it's working correctly)
4. Check the box for Fix Position When Scrolling
As soon as I check the "Fix position when scrolling" option the horizontal scroll won't work anymore.
This has been reported here but has never been solved.
Copy link to clipboard
Copied
Hi @Alessandro M , I tried to recreate a sample file following the steps you mentioned and if I'm not missing something, it works, both horizontal scroll of the blue squares at top and they're being fixed while vertically scrolling works, you can see the prototype here: https://xd.adobe.com/view/294167e2-f403-4d1c-8c76-af1348a1762c-7c12/ and the file here: https://www.dropbox.com/s/024azpc6og1eh6r/horizontal-scroll-test.xd?dl=0 Hope this helps!
Copy link to clipboard
Copied
Hi @AkinGn, thanks for getting back to me.
I really appreciate the effort but this stops working as soon as you create a group and place some elements in it. That's strange and I can't figure it out why is happening.
Here is your prototype updated with a group, as you can see the horizontal scroll isn't working anymore:
https://drive.google.com/file/d/1dyJnyRWje9ZaMA2JK-02JMjewhK2Fohs/view
I'd like to keep the group for a clean and organize workflow. This is actually pretty common to create an header with just the tabs area that scroll.
Thanks in advance.
PS: I replied also on the old post, LMK which one is best to keep update.
Copy link to clipboard
Copied
Hi @Alessandro M, yes I checked the file and seen the issue, I guess that's the default behaviour, XD engine needs to have direct access to the scrollable element, if it's included in a group, it becomes hidden etc I guess and scrollability doesn't function, thinking what I'd do under these circumstances, I guess keeping the scrollable element as a seperate, on top element would be the best work around (you can keep underneath/bg layer of the nav/header as seperate elements, also fixed on vertical scroll.) Hope this helps!