Announcement

Collapse
No announcement yet.

Adding arrows to scroll bars?

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Adding arrows to scroll bars?

    I would like to add up and down arrows onto the buttons of a scroll bar. I searched around the web and found the code below, but it doesn't work yet. I DO already have a functioning scroll bar on the site and can style the colors of it, but haven't figured out where I'm going wrong with trying to add the buttons.

    Also, can I have a larger square .png of the up/down arrows and have them scale down? Or do those images need to be actual size?

    Code:
    ::-webkit-scrollbar-button:vertical:decrement{
        background-image: url(uploads/dynamik-gen/theme/images/arrow-up.png) ;
        background-repeat: no-repeat;
        background-position: 3px 4px, 0 0;
    }
    
    ::-webkit-scrollbar-button:vertical:increment{
        background-image: url(uploads/dynamik-gen/theme/images/arrow-down.png) ;
        background-repeat: no-repeat;
        background-position: 3px 5px, 0 0;
    }

  • #2
    Are you talking about the browser scrollbar (I´d guess)? If you really intend to style scroll bars and also have a good cross-browser experience, you are up to a huuuuuuge, time-consuming task. Currently, you are only styling scrollbars in webkit browsers and no other browser will see your styles anyway (hope you are aware of that - you´d need to look at it in other browsers and mobiles to see what I mean).

    To get a good overview and some information regarding the problem, you might want to read this (older thread as it´s an older problem, but still good): https://stackoverflow.com/questions/...50577#14150577

    My two cents: Don´t waste your energy on that.

    Comment


    • #3
      Cool, thank you!

      Comment

      Working...
      X