Forum Discussion

JesseSpinella's avatar
JesseSpinella
Community Member
14 years ago

Change scroll panel scroller color

Hello Heroes, Is there a way to change the scroll bar color? Not the background color of the box that you put objects in, but the actual scroll bar itself? Jesse
storyline 360
Snorrski's avatar
Snorrski
Community Member
7 years ago

Sure thing. I simply put the script to trigger on timeline start, on the page where scroll panel is.

maxmaizels's avatar
maxmaizels
Community Member
7 years ago

yes!
i could change color!
but, i attempted to make wider (20px) and narrower ?page as you suggested
with no luck.
this is a great feature!
m

  • Snorrski's avatar
    Snorrski
    Community Member
    7 years ago

    Here is an example code to double the width:

    $("<style type='text/css'> .scrollarea-scrollbar:before { left: 10px !important; width: 20px !important; border-radius: 0px !important;} .scrollarea-btn:after { left: 10px !important; width: 20px !important; border-radius: 10px !important;} </style>").appendTo("head");

    Note that each style rule needs !important after it. Also you should set the border radius to be the same as the width, to make it look pretty. Or to zero, for a square look. Finally you need to subtract the same number of pixels from the left property, as you add to the width property, when making it wider, and vice versa when making it narrower. 

    I have added a story file for your enjoyment.

    • PhilippeDaveze's avatar
      PhilippeDaveze
      Community Member
      7 years ago

      HI,

      I have downloaded your story and published it but the buttons don't change the state of the scrollbar. Maybe I missed something? Thank you

      • Snorrski's avatar
        Snorrski
        Community Member
        7 years ago

        Hi it seems that with the newest version of storyline, the dom structure has changed a bit. So now the needed code is actually a lot simpler:
        On the slide where the scrolling panel is:

        $('.scrollarea-btn-after').css('background','#000') 

        you just change the color code to the one you want. This example is black.