fading scrollbar when not scrolling

user_13604738 0
Viewed 1718

I recently started making a little website project and I'm struggling a bit with customizing my scrollbar.

I got so far that the scrollbar is only visible when you hover over it but that's not exactly my goal. I want it to be hidden when the user didn't scroll for a certain period of time. This is what I got so far:

<style>

    ::-webkit-scrollbar {
        width: 6px;
        height: 12px;
    }

    ::-webkit-scrollbar-track {
        background: rgba(242, 242, 242, 0);
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(221, 221, 221, 0);
        border-radius: 3px;
    }

    /*Commented because I don't want it to show when I just hover the site
    body:hover::-webkit-scrollbar-thumb {
        background: rgb(0, 0, 0);
    }
    */


    body.scrolling::-webkit-scrollbar-thumb,
    ::-webkit-scrollbar-thumb:horizontal:hover,
    ::-webkit-scrollbar-thumb:vertical:hover {
        background: rgb(0, 0, 0);
    }


    ::-webkit-scrollbar-thumb:horizontal:active,
    ::-webkit-scrollbar-thumb:vertical:active {
        background: rgb(0, 0, 0);
    }
</style>

<script>$(window).scroll(function() {
    $('body').addClass('scrolling');
    alert("!!");
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        $('body').removeClass('scrolling');
    }, 250));
});</script>

This is my first post on a forum like this so please just tell me if I have to provide more info and which info is missing.

webkit scrollbar css html javascript
1 Answers

I think its just a typo. Change the closing style tag to </style>. It can't be tested very well if theres an alert popping up every time you scroll. Remove alert("!!"); or change it to console.log("!!");

[LATER]

As you want the scrollbar to fade in and out with a transition, you'll have to use an element that covers it and animate its opacity. It's not possible to put an element above the document's scrollbar though. That's why you have to wrap the whole page inside a div and customize its scrollbar.

document.querySelector('.scroll-box').addEventListener('scroll', hideCoverBar);
document.querySelector('.scroll-box').addEventListener('mousemove', hideCoverBar);
var showTimeout;
function hideCoverBar() {
  document.querySelector('.cover-bar').classList.add('hidden');
  clearTimeout(showTimeout);
  showTimeout = setTimeout(showCoverBar, 1000);

}
function showCoverBar() {
  document.querySelector('.cover-bar').classList.remove('hidden');
}
body,
html {
  margin: 0;
  padding: 0;
  font-family: monospace;
}

.main {
  padding: 20px;
}

h1 {
  font-size: 50px;
  margin: 0;
}

p {
  font-size: 12px;
  margin: 0;
}

img {
  display: block;
  margin: 0 auto;
  padding: 20px;
  max-width: 100%;
  box-sizing: border-box;
}

.scroll-bar-wrap {
  width: 100vw;
  position: relative;
}

.scroll-box {
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
}

.scroll-box::-webkit-scrollbar {
  width: .4em;
}

.scroll-box::-webkit-scrollbar,
.scroll-box::-webkit-scrollbar-thumb {
  overflow: visible;
  border-radius: 4px;
}

.scroll-box::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .2);
}

.cover-bar {
  position: absolute;
  background: #fff;
  pointer-events: none;
  height: 100%;
  top: 0;
  right: 0;
  width: .4em;
  -webkit-transition: all .5s;
  opacity: 1;
}

.cover-bar.hidden {
  opacity: 0;
}
<div class="scroll-bar-wrap">
        <div class="scroll-box">
            <div class="main">
                <h1>Lorem ipsum dolor sit amet
                </h1>
                <img src="http://placekitten.com/600/400" />
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
                </p>
            </div>
        </div>
        <div class="cover-bar"></div>
    </div>

fiddle: https://jsfiddle.net/71fjr0Lz/

user_134240970
Related