Custom Div Scrollbar

Question

How to I make a Design a scrollbar using html, css or javascript?

What I dont want

I dont want to edit the current the scrollbar for my browser.

What I do Want

I want to make my own scrollbar for my companies website.

https://keenthemes.com/metronic/preview/?demo=demo4

"Code"

I dont know how to even start building this but ill do my best!

Html

.Stack_main-section {
  height: 40rem;
  border: .1rem solid lightgray;
  /*   flex display so the content is full height */
  display: flex;
}

.Stack_content {
  padding: .7remabove
}

.Stack_bar-track {
  background: lightgray;
  padding: .4rem;
}

.Stack_bar {
  height: .4rem;
  width: .7rem;
  height: 9rem;
  border-radius: .8rem;
  background: gray;
}

<section class="Stack_main-section">
  <div class="Stack_content ">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac turpis at massa consectetur malesuada vel eu lorem. Vivamus ac eros id ex hendrerit rutrum eget et turpis. Nunc mollis diam id purus porttitor eleifend a interdum neque. Quisque et molestie
    enim, eu dignissim nunc. Suspendisse varius mauris eu aliquet rutrum. Maecenas convallis tincidunt tellus, nec tincidunt tellus venenatis at. Quisque eget lacinia magna, ac placerat justo. Donec cursus elementum massa, id posuere lacus posuere eget.
    Nunc at dui sodales, varius erat vel, varius lorem. Pellentesque cursus iaculis felis, auctor ultrices ligula elementum vel. Maecenas est dui, ullamcorper ut semper vel, tincidunt sit amet tellus. Nunc ornare ornare sapien in condimentum. Morbi porttitor
    feugiat ligula, sit amet feugiat tellus maximus eget. Sed lobortis semper urna, in accumsan ipsum. Aenean dictum dui non dui vehicula porta. Vivamus pellentesque ligula eu egestas facilisis. Pellentesque vitae turpis consectetur lorem laoreet auctor.
    Nunc ultrices pellentesque mi, nec lobortis neque facilisis id. Quisque pharetra vitae nibh eu venenatis. Cras pretium convallis cursus. Phasellus quis ex nisi. Nulla et laoreet eros, ac laoreet ante. Maecenas ornare risus a pellentesque varius. Sed
    tristique tellus quam, sed volutpat ex sodales quis. Phasellus congue velit a nisl consequat, at tincidunt mi gravida. Morbi sit amet magna a sapien varius accumsan. Phasellus scelerisque, urna faucibus placerat venenatis, dui est fermentum massa,
    non lacinia arcu sem in orci. Ut elementum massa et turpis aliquam varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut elementum augue. Sed pulvinar eleifend cursus. Donec id mi odio. Ut nec nibh malesuada, aliquet velit nec,
    tincidunt mauris. Mauris sagittis placerat enim, at faucibus turpis vestibulum vel. Pellentesque at venenatis mauris, lacinia blandit dolor. Integer massa sem, elementum a nulla quis, rutrum euismod felis. Cras a lacinia urna. Nulla scelerisque venenatis
    lectus ut ullamcorper. Curabitur eu suscipit metus. Praesent velit elit, luctus a facilisis nec, tempus non diam. Fusce nec aliquam est. Maecenas odio odio, pulvinar vel volutpat et, ullamcorper a ligula. Fusce bibendum lacus in est ultrices, vitae
    mattis mauris sodales. Curabitur massa nisl, placerat a nunc a, scelerisque rhoncus dui. Vestibulum nibh dui, dictum et porta vel, hendrerit et augue. Morbi viverra est vel sapien venenatis faucibus. Nullam iaculis congue quam. Vestibulum dignissim
    iaculis nulla, congue tincidunt nisi iaculis vitae. Fusce mollis aliquam ante, a sagittis dolor mattis id. Morbi aliquam sem nunc, at dictum sem aliquam ac. Suspendisse molestie justo leo, at venenatis mauris aliquam eu. Nunc id tortor malesuada diam
    consectetur dapibus sit amet a lorem. Pellentesque dictum et libero vitae semper. Donec sit amet ipsum vel nulla eleifend fringilla ac at velit. Donec consectetur aliquam metus. Integer eget ex et velit imperdiet pulvinar. Duis nisi ante, finibus
    eu posuere id, sodales vel sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui ex, placerat eu felis a, luctus ultricies nibh. Nam malesuada viverra facilisis. Nam rhoncus elit velit, at ullamcorper nisi viverra scelerisque. Pellentesque
    et lacus non dolor fermentum fermentum. Morbi in vulputate nunc, sit amet malesuada massa. Nullam euismod dui id egestas scelerisque. Donec vel ex ut justo mollis varius. Quisque at tortor nec est cursus iaculis. Vivamus gravida purus a ligula elementum
    dictum. Mauris diam dolor, convallis quis imperdiet et, maximus quis leo. Morbi aliquam pretium lectus ac hendrerit.t
  </div>
  <div class="Stack_bar-track">
    <div class="Stack_bar">
      .
    </div>
  </div>
</section>

!important

That just an example of what I wnat I know if this is you you build it professionally.

Please help and Thank you in advance.

Possible duplicate of [How to create a custom scrollbar on a div (Facebook style)](https://stackoverflow.com/questions/9945547/how-to-create-a-custom-scrollbar-on-a-div-facebook-style) — poke, May 01 '18 at 18:36

score 2 · Accepted Answer · answered May 01 '18 at 18:51

Here is a simple example of what you can do with -webkit-scrollbar

.Stack_main-section {
  height: 40rem;
  border: .1rem solid lightgray;
  /*   flex display so the content is full height */
  display: flex;
}

.Stack_content {
  padding: .7remabove
}

.Stack_bar-track {
  background: lightgray;
  padding: .4rem;
}

.Stack_bar {
  height: .4rem;
  width: .7rem;
  height: 9rem;
  border-radius: .8rem;
  background: gray;
}


/* Scrollbar */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track-piece {
  background-color: #ddd;
}

*::-webkit-scrollbar-thumb {
  background-color: #aaa;
  border-radius: 6px;
  border-style: none;
}

<section class="Stack_main-section">
  <div class="Stack_content ">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac turpis at massa consectetur malesuada vel eu lorem. Vivamus ac eros id ex hendrerit rutrum eget et turpis. Nunc mollis diam id purus porttitor eleifend a interdum neque. Quisque et molestie
    enim, eu dignissim nunc. Suspendisse varius mauris eu aliquet rutrum. Maecenas convallis tincidunt tellus, nec tincidunt tellus venenatis at. Quisque eget lacinia magna, ac placerat justo. Donec cursus elementum massa, id posuere lacus posuere eget.
    Nunc at dui sodales, varius erat vel, varius lorem. Pellentesque cursus iaculis felis, auctor ultrices ligula elementum vel. Maecenas est dui, ullamcorper ut semper vel, tincidunt sit amet tellus. Nunc ornare ornare sapien in condimentum. Morbi porttitor
    feugiat ligula, sit amet feugiat tellus maximus eget. Sed lobortis semper urna, in accumsan ipsum. Aenean dictum dui non dui vehicula porta. Vivamus pellentesque ligula eu egestas facilisis. Pellentesque vitae turpis consectetur lorem laoreet auctor.
    Nunc ultrices pellentesque mi, nec lobortis neque facilisis id. Quisque pharetra vitae nibh eu venenatis. Cras pretium convallis cursus. Phasellus quis ex nisi. Nulla et laoreet eros, ac laoreet ante. Maecenas ornare risus a pellentesque varius. Sed
    tristique tellus quam, sed volutpat ex sodales quis. Phasellus congue velit a nisl consequat, at tincidunt mi gravida. Morbi sit amet magna a sapien varius accumsan. Phasellus scelerisque, urna faucibus placerat venenatis, dui est fermentum massa,
    non lacinia arcu sem in orci. Ut elementum massa et turpis aliquam varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut elementum augue. Sed pulvinar eleifend cursus. Donec id mi odio. Ut nec nibh malesuada, aliquet velit nec,
    tincidunt mauris. Mauris sagittis placerat enim, at faucibus turpis vestibulum vel. Pellentesque at venenatis mauris, lacinia blandit dolor. Integer massa sem, elementum a nulla quis, rutrum euismod felis. Cras a lacinia urna. Nulla scelerisque venenatis
    lectus ut ullamcorper. Curabitur eu suscipit metus. Praesent velit elit, luctus a facilisis nec, tempus non diam. Fusce nec aliquam est. Maecenas odio odio, pulvinar vel volutpat et, ullamcorper a ligula. Fusce bibendum lacus in est ultrices, vitae
    mattis mauris sodales. Curabitur massa nisl, placerat a nunc a, scelerisque rhoncus dui. Vestibulum nibh dui, dictum et porta vel, hendrerit et augue. Morbi viverra est vel sapien venenatis faucibus. Nullam iaculis congue quam. Vestibulum dignissim
    iaculis nulla, congue tincidunt nisi iaculis vitae. Fusce mollis aliquam ante, a sagittis dolor mattis id. Morbi aliquam sem nunc, at dictum sem aliquam ac. Suspendisse molestie justo leo, at venenatis mauris aliquam eu. Nunc id tortor malesuada diam
    consectetur dapibus sit amet a lorem. Pellentesque dictum et libero vitae semper. Donec sit amet ipsum vel nulla eleifend fringilla ac at velit. Donec consectetur aliquam metus. Integer eget ex et velit imperdiet pulvinar. Duis nisi ante, finibus
    eu posuere id, sodales vel sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui ex, placerat eu felis a, luctus ultricies nibh. Nam malesuada viverra facilisis. Nam rhoncus elit velit, at ullamcorper nisi viverra scelerisque. Pellentesque
    et lacus non dolor fermentum fermentum. Morbi in vulputate nunc, sit amet malesuada massa. Nullam euismod dui id egestas scelerisque. Donec vel ex ut justo mollis varius. Quisque at tortor nec est cursus iaculis. Vivamus gravida purus a ligula elementum
    dictum. Mauris diam dolor, convallis quis imperdiet et, maximus quis leo. Morbi aliquam pretium lectus ac hendrerit.t
  </div>
  <!--div class="Stack_bar-track">
    <div class="Stack_bar">
      .
    </div>
  </div-->
</section>

I hope it helps.

CodeSpent · Answer 2 · 2018-05-02T00:38:15.113

1

::-webkit-scrollbar 
::-webkit-scrollbar-button
::-webkit-scrollbar-track 
::-webkit-scrollbar-track-piece 
::-webkit-scrollbar-thumb 
::-webkit-scrollbar-corner
 ::-webkit-resizer

These are the elements you're looking for. CSS-Tricks has some excellent examples outlined and what you're trying to achieve here isn't very specific, but if you clarify the kind of styles you're going for I'd be happy to edit my answer a bit to accommodate!

As well here's a CodePen with some pretty clean options so you can compare and see how the styoes react.

Hope this helps!

For browser's that don't use webkit as a render engine, you just want to add it's alternative.

Or simply use a plug-in. I found this megathread with every bit of information you will likely ever need on the topic.

https://stackoverflow.com/a/14150577/5860648

edited May 02 '18 at 00:38

answered May 01 '18 at 18:44

CodeSpent

1,684
4
23
46

Please note I said. I don’t want to edit the scrollbar for my browser. I want my own. Please visit the keenthemes link. – Wovasteen Gova May 01 '18 at 20:03
That seems an awful lot like trying to reinvent the wheel? Why do you want to "create" a scroll bar rather than just styling the existing object to fit your needs? If it's for the sake of making the content in a div scrollable you can achieve this just as easily. – CodeSpent May 01 '18 at 20:10
As well you don't have to globally change the browser scroll bar. You can force the styles to only target your Div all the same. – CodeSpent May 01 '18 at 20:11
Webkit doesn't work for some browsers. If I have my own styles it would work for all browsers. – Wovasteen Gova May 02 '18 at 00:30
For browser's that don't use webkit as a render engine, you just want to add it's alternative. Or simply use a plug-in. I found this megathread with every bit of information you will likely ever need on the topic. https://stackoverflow.com/a/14150577/5860648 – CodeSpent May 02 '18 at 00:37
1

Thank you! I might use a library, or build( have someone build) the bars from scratch. I might even ask keenthemes how they made there's – Wovasteen Gova May 02 '18 at 00:45
You could always inspect Element and do a bit of digging on one of their demos. :) I highly recommend using a library, even if just for reference to create your own minimized version. Taking the lazy way out doesn't teach you much, but taking the overly complicated way will only discourage you. It's best to sit in the middle and use the resources at your disposal. :) – CodeSpent May 02 '18 at 00:47

Custom Div Scrollbar

2 Answers2