Hiding Scrollbars - Mobile Prototype

newbie-question

#1

mobile-help.rp (434.3 KB)

Hello

Problem:

Prototype will not scroll if scrollbars are set to “None”. When I show the
vertical scroll bar, it will scroll.

Can’t seem to get this working. I noticed that in Axure’s scrolling examples
the groups had the option to “Fit to Content”. My groups do not have that option
and I wonder if that;'s the problem.

Thank you very much.


#2

Hi LBT,
Group content doesn’t have ‘Fit to Content’ option.
You have to convert dynamic panel.I hope this will help you.

Thanks,
Vikram


#3

Exactly the scrollbars will be active if it is set to None, If you do set Vertical Scroll then the content inside the dynamic panel need to longer than the dynamic panel size itself.


#4

Too late for OP but I was able to get this to work with a little javascript insertion via an Open Link on Page Load.

javascript: $("head").append('<style>[data-label="hiddenScrollbar"]::-webkit-scrollbar{display:none;}</style>'); void(0);

Once you have that in place the only thing you need to do is create a dynamic panel with scrolling and then name the state of that panel hiddenScrollbar. Technically you can name it whatever you want but it should be unique and you will need to adjust the above javascript to match. The above only works on Chrome as far as I’m aware but you could add the additional CSS for other browsers, if needed. Cheers!


#5

To hide the scrollbar in WebKit-based browsers, you have to use the ::-webkit-scrollbar pseudo selector. ::-webkit-scrollbar is a pseudo-element in CSS used by developers to modify the look of a browser’s scrollbar. o In this article, we will disable the scroll bar **by using on 2048 cupcakes function . With the click of the button, we will make the scroll-bar visible but disable. Disable using jQuery with a button: Here once we disable the scroll event the scroll won’t work whether we want to make the scrollbar visible or not.


#6

A useful CSS hack is to use::-webkit-scrollbar to hide the scrollbar in WebKit browsers. Though these subjects are unrelated to the first CSS solution, the suggestion of using jQuery to disable scroll events and make the scrollbar visible may mislead viewers. It can be necessary to provide clarification to achieve a thorough comprehension.