Having a devilish time with scrollbars

[apotheonlabs]

I’m trying to change the styling of scrollbars on repeating groups in my app, and am having a tough time figuring out how to make things happen.

Some head scratchers for me:

1. The current way I’ve been able to get CSS to apply to my scrollbars is via the CSS Tools plugin and a workflow action for “Add custom style to head” when “Page is loaded”. Separately, I’ve tried using Page HTML Header on the page, and have also tried giving the repeating group an ID and applying CSS to that ID via Page HTML Header - neither of these seem to work. Can anybody help me understand why?

This is the CSS I’m currently applying on pageload:

<style> 
::-webkit-scrollbar-track { 
    border-radius: 10px; 
    background-color: #4083A9; 
} 
::-webkit-scrollbar { 
    width: 5px; 
} 
::-webkit-scrollbar-thumb { 
    border-radius: 10px; 
    background-color: #4083A9; 
} 
</style>

2. There’s an odd behavior now where the scrollbar is visible on page load, disappears whenever you scroll down on that group, but then reappears if you scroll up on the page. Any thoughts on why this might be happening?

3. What I would ideally like to happen is for the scrollbar to not be visible by default and only show up when the group is actively being scrolled (and hides again when the scroll is finished). Any pointers on how to do that?

Thanks!

[sohaan_gd]

::-webkit-scrollbar { width: 0px; height: 0px; } ::-webkit-scrollbar-button { width: 0px; height: 0px; } ::-webkit-scrollbar-thumb { background: transparent; border: 0px none; border-radius: 0px; } ::-webkit-scrollbar-thumb:hover { background: transparent; } ::-webkit-scrollbar-thumb:active { background: transparent; } ::-webkit-scrollbar-track { background: transparent; border: 0px none; border-radius: 0px; } ::-webkit-scrollbar-track:hover { background: transparent; } ::-webkit-scrollbar-track:active { background: transparent; } ::-webkit-scrollbar-corner { background: transparent; }