CODEWITHSUNDEEP
htmlcss
S_R
S_R

Reputation: 1998

Custom scrollbar but keep disappearing effect

Is there any way to just change the colour of a scrollbar in CSS, but keep the native 'disappear when not scrolling' effect. Basically I just want to turn the native scrollbar blue instead of its default black/dark-grey, but whenever I apply code like this

::-webkit-scrollbar {
    width:5px;
}

::-webkit-scrollbar-track {
    background: transparent; 
}

::-webkit-scrollbar-thumb {
    background: blue; 
    border-radius:5px;
    opacity:0.5;
}

The scrollbar looks how I want it too, but its persistent, instead of disappearing when i'm not scrolling. Is there any way I can keep that effect on a custom scrollbar?

EDIT - As requested my current browser is google chrome 73.0.3683.103

Upvotes: 1

Views: 3127

Answers (2)

Joe
Joe

Reputation: 3151

A late answer hopefully it still helps.

I don't think you can do this with pure CSS, (but i could be wrong)

You can use some jQuery to help you. I have a working fiddle here: https://jsfiddle.net/kingafrojoe/Le253gdw/29/

In your CSS .has-scroll to the scrollbar selectors as below

/* Add a css class to your scroll selectors */
.has-scroll::-webkit-scrollbar {
    width: 15px;
}
.has-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.has-scroll::-webkit-scrollbar-thumb {
    background: blue;
    border-radius: 5px;
    opacity: 0.5;
}
#tall {
    height: 500px;
    width: 100%;
    background: #00ffff;
    display: block;
}

In your HTML you will need a wrapper div wrapping the whole body of your document. The body class also gets the class has-scroll jQuery will control this class.

<body class="has-scroll">
    <div id="site">

        <div id="tall"> I am tall content</div>

        <!-- ALL other page HTML -->
    </div>
</body>
</html>

Then some jQuery to detect the height of the content and the window. If the content is taller than the window then there needs to be a scrollbar, else the scrollbar can do default behavior

<script type="text/javascript">

jQuery(window).load(function(){

    var _body = $('body');
    var _site = $('#site');

    $(window).resize(function(){
        show_scroll();// call the function on the window resize
    });

    show_scroll();// call the function

    function show_scroll(){
        // if the content wrapper is taller than the window add the has-scroll class,
        // else remove the has scroll class to return default scroll behavior.
        if(_site.outerHeight()>$(window).outerHeight()){
            _body.addClass('has-scroll');
        }else{
            _body.removeClass('has-scroll');
        }
    }
});
</script>

Upvotes: 0

Zoilo Reyes
Zoilo Reyes

Reputation: 573

The most you can do using only css and webkit is to use the :hover/:active selectors to display or hide the scrollbar. The thing is, this will work on hover/selection and not on a finger swipe or a mouse wheel. Also this webkit property will not work on firefox or edge.

::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 5px;
    opacity: 0;
}
::-webkit-scrollbar-thumb:hover {
    background: blue;
    border-radius: 5px;
    opacity: 0.5;
}

Info on webkit scrollbar

This question has a nice example of a smooth transition on hover

Upvotes: 2

Related Questions