Hei currently I’m trying to make my little Tab Navigation scrollable (dragable) but for me it only works with an Scrollbar witch i don’t like. Can somebody help me?
Horizontal Scroll.rp (52.6 KB)
Horizontal Scroll for Tab Navigation without the Scrollbar (Mobile)
lshillman
#2
Hey there! You can do this by using the dynamic panel’s “dragged” interaction. You’ll need to move the group of tabs inside the panel with the cursor’s drag-x. You can set boundaries so the user can’t accidentally scroll past the tabs in either direction:
Horizontal drag - no scrollbars.rp (54.3 KB)
mbc66
#3
I’ve used the basic “drag-to-scroll” method that @lshillman describes for many projects, and prefer it over “true scrolling” for touchscreen embedded UI prototypes (for kiosks, custom control panels, etc.) However, it takes more work to set up, and there is a technical difference between moving widgets (with a drag) and scrolling content on the page or in a dynamic panel.
If you need actual scrolling–maybe you need to support a mouse with scroll-wheel, or you have interactions like **Scroll To Widget", or need to make use of scroll position in a dynamic panel, then you can use a little trick to hide the scrollbar. Set up a scrollable dynamic panel, then create a dynamic panel out of that–so you have your dynamic panel nested within a “parent” dynamic panel. Resize the parent panel by dragging the right edge (and/or bottom edge for horizontal scrollbar) just until the scrollbar area disappears–usually about 20 px–and verify the “Fit To Content” option is off. Voila, you should have a true scrollable panel with no visible scrollbar.