X3 Photo Gallery Support Forums

Topic Author
Posts: 10
Joined: 02 Jan 2016, 10:38

Design Scrollbar in Fullscreen Mode

04 Aug 2018, 07:45

Is there a way to design the scrollbar, for all common browsers, in fullscreen mode ?

Thank you, Marcus ...
User avatar
X3 Wizard
Posts: 12093
Joined: 30 Sep 2006, 03:37

Re: Design Scrollbar in Fullscreen Mode

04 Aug 2018, 12:50

Sorry, no not really, at least not common. We did a big cleanup of scrollbars in release X3.25.0:
Scrollbar styling
Big cleanup of scrollbar styling for sidebar and slidemenu layouts across OS/browser combinations. X3 only styles the scrollbar for menu overflow of these layouts, because they render inside the page. X3 does NOT attempt to style the main page scrollbar, which should remain same as visitors default OS/browser settings.
  • No styling on Mac browsers because A) By default, scrollbars appear “on-demand” and B ) Scrollbars are already subtly styled by the OS and consistent across all browsers.
  • Microsoft Explorer + Edge added -ms-autohiding-scrollbar, which allows scrollbars to autohide and appear only “on-demand”.
  • Removed outdated scrollbar styling for Explorer (10-11, not supported in Edge), because now we have autohiding scrollbar.
  • Only Windows webkit browsers (Chrome, Safari, Opera) have subtle scrollbar styling to compliment the design.
To put this more into perspective in regards to your question:
Firefox: No, not supported in any way.
Microsoft Edge: No, not supported in any way.
Internet explorer: Supports explorer-specific styling. Only colors. Ref
Chrome/Safari: Supports webkit-specific scrollbar styling. Ref
Mac (all browsers): Uses OS-specific scrollbars, set to "hidden" by default (only displays while scrolling). Simply a bad idea to try to edit.

All in all, it's simply a bad idea. Scrollbars are a mess. You would have to design scrollbars separately for Explorer and webkit-based browsers, and it simply doesn't work in Firefox or Edge. For Mac, you are messing with the native OS scrollbars.

Considering the above, yes it can be done, and YES, you could create styles that ONLY apply when in fullscreen mode. Not something I would recommend spending time on, and not something I can offer any further knowledge about, apart from how you would go about applying the designs "only" in fullscreen mode.