Adding arrows to a scrollbar

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
kronpano
Posts: 27
Joined: Fri May 20, 2022 10:58 pm

Hi there,

a customer had a problem scrolling through a thumbnail list on a certain device so they would like to have arrows on a scrollbar.
Though that would be easy using some CSS by adding

Code: Select all

   
   /* Buttons */
    ::-webkit-scrollbar-button:single-button {
      background-color: #bbbbbb;
      display: block;
      border-style: solid;
      height: 13px;
      width: 16px;
    }
    /* Up */
    ::-webkit-scrollbar-button:single-button:vertical:decrement {
      border-width: 0 8px 8px 8px;
      border-color: transparent transparent #555555 transparent;
    }

    ::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
      border-color: transparent transparent #777777 transparent;
    }
    /* Down */
    ::-webkit-scrollbar-button:single-button:vertical:increment {
      border-width: 8px 8px 0 8px;
      border-color: #555555 transparent transparent transparent;
    }

    ::-webkit-scrollbar-button:vertical:single-button:increment:hover {
      border-color: #777777 transparent transparent transparent;
    }
    
as a CSS Style - checked it on w3schools and it works in general but I can't get it to work in Pano2VR.

Added the style to the scroll area in question (I checked that it is the correct area by changing the scrollbar colour) but somehow the arrows don't show up.

Here is what I did in Pano2VR
Image

I'm quite sure I'm just missing something but I don't really know what :(
kronpano
Posts: 27
Joined: Fri May 20, 2022 10:58 pm

OK, I think I'm getting closer

That scrollbar of a scroll_area is not a normal scrollbar created by the browser because the content doesn't fit - is it?
The ggskin_scrollarea_vscrollbg and .._vscrollfg create a scrollbar but it is not a "traditional overflow" scrollbar so my attempts to use webkit to style it won't work.

That's at least what I think after poking around with the developer tools.
kronpano
Posts: 27
Joined: Fri May 20, 2022 10:58 pm

I might not have really explained where I would like to add those scrollbar arrows - here is an image to illustrate
Image
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
What you can do is add arrow buttons and then use actions to move the scroll area inner element.
See attched.

Actions are Mouse Click, Position/Size, Scroll By,
the use a positive number to scroll by whatever pixels you choose and a negative number to scroll back.
Regards,
Attachments
scroll.zip
(56.78 KiB) Downloaded 109 times
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
kronpano
Posts: 27
Joined: Fri May 20, 2022 10:58 pm

Thanks,
thought I need extra buttons.

Had a quick look and basically it is two separate buttons I would need to add which is fine but so far I haven't figured out how to shorten the scrollbar of a scroll_area.
Percent and CSS didn't really work (it populated at runtime??) so auto is my only option at the moment and that takes up all the space vertically.
Is there any hint on how to create some space at the top/bottom to fit those new buttons in quite seamlessly?
Or do I just add the buttons and put them "on top" (Z-order) of the existing scrollbar?

Cheers
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

If the button graphics are small just overlap the scroll bar.
In this case, they are text symbols so can change the size and colour.

ScreenFlow.gif
ScreenFlow.gif (751.66 KiB) Viewed 2796 times

See attched.
Regards,
Attachments
project.zip
(58.78 KiB) Downloaded 133 times
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
Post Reply