Transparent scrollbar with css

Question

Now use this code  and many variations of this   but scroll track get dark-grey color  something like  222222 or near this  Find many examples  but all of them give same result  Opera  Chrome and Firefox show this bug  How to fix    style-3  -webkit-scrollbar-track       -webkit-box-shadow  inset 0 0 6px rgba 0  0  0  0 3       background-color  transparent      style-3  -webkit-scrollbar       width  6px      background-color  transparent      style-3  -webkit-scrollbar-thumb       background-color   000000

User · Answer

Try this one  it works fine for me   In CSS     -webkit-scrollbar       width  0px      -webkit-scrollbar-track-piece       background-color  transparent      -webkit-border-radius  6px      and here is the working demo  https   jsfiddle net qpvnecz5

User · Answer

It might be too late  but still  For those who have not been helped by any method I suggest making custom scrollbar bar in pure javascript  For a start  disable the standard scrollbar in style css   -webkit-scrollbar      width  0     Now let s create the scrollbar container and the scrollbar itself  lt  DOCTYPE HTML gt   lt html lang  quot ru quot  gt   lt head gt       lt link rel  quot stylesheet quot  type  quot text css quot  href  quot style css quot   gt       lt script src  quot main js quot  gt  lt  script gt      meta  lt  head gt    lt body gt    lt div class  quot custom scroll quot  gt       lt div class  quot scroll block quot  gt  lt  div gt   lt  div gt      content   lt script gt customScroll    lt  script gt   lt  body gt   lt  html gt   at the same time  we will connect the customScroll   function  and create it in the file main js  function customScroll         let scrollBlock   documentSite querySelector  quot  scroll block quot        let body   documentSite querySelector  quot body quot        let screenSize   screenHeight - scrollBlock offsetHeight      documentSite addEventListener  quot scroll quot        gt            scrollBlock style top    window pageYOffset   body offsetHeight    screenSize    screenSize    body offsetHeight -  body offsetHeight - screenHeight      body offsetHeight - screenHeight         quot px quot               setScroll scrollBlock  body      function setScroll scrollBlock  body        let newPos   0  lastPos   0          scrollBlock onmousedown   onScrollSet          scrollBlock onselectstart        gt   return false         function onScrollSet e            e   e    window event          lastPos   e clientY          document onmouseup   stopScroll          document onmousemove   moveScroll          return false             function moveScroll e            e   e    window event          newPos   lastPos - e clientY          lastPos   e clientY          if scrollBlock offsetTop - newPos  gt   0  amp  amp  scrollBlock offsetTop - newPos  lt   Math ceil screenHeight - scrollBlock offsetHeight                 window scrollBy 0  -newPos   screenHeight    body offsetHeight                        function stopScroll             document onmouseup   null          document onmousemove   null           adding styles for the scrollbar  custom scroll      width  0 5vw      height  100       position  fixed      right  0      z-index  100      scroll block      width  0 5vw      height  20vh      background-color   ffffff      z-index  101      position  absolute      border-radius  4px     Done

User · Answer

Just set display none  as an attribute in your stylesheet    It s way better than loading pictures for nothing   body  -webkit-scrollbar     width  9px    height  9px     body  -webkit-scrollbar-button start decrement  body  -webkit-scrollbar-button end increment     display  block    height  0    background-color  transparent     body  -webkit-scrollbar-track-piece     background-color   ffffff    opacity  0 2        Here      display  none     -webkit-border-radius  0    -webkit-border-bottom-right-radius  14px    -webkit-border-bottom-left-radius  14px     body  -webkit-scrollbar-thumb vertical     height  50px    background-color   333333    -webkit-border-radius  8px

User · Answer

If you use this   body       overflow  overlay      The scrollbar will then also take transparent backgrounds across the page  This will also put the scrollbar inside the page instead of removing some of the width to put in the scrollbar   Here is a demo code  I wasn t able to put it inside any of the codepen or jsfiddle  apperantly it took me a while until I figured out  but they don t show the transparency  and I don t know why   But putting this in a HTML file should go fine   Was able to put it on fiddle  https   jsfiddle net 3awLgj5v    x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt style gt  x000D  html  body   x000D    margin  0  x000D    padding  0  x000D    x000D   x000D  body   x000D    overflow  overlay  x000D    x000D   x000D   div1   x000D    background  grey  x000D    margin-top  200px  x000D    margin-bottom  20px  x000D    height  20px  x000D    x000D   x000D    -webkit-scrollbar   x000D    width  10px  x000D    height  10px  x000D    x000D   x000D    -webkit-scrollbar-thumb   x000D    background  rgba 90  90  90   x000D    x000D   x000D    -webkit-scrollbar-track   x000D    background  rgba 0  0  0  0 2   x000D    x000D   lt  style gt  x000D     x000D   lt body gt  x000D   x000D   lt div class  div1  gt  lt  div gt  x000D   x000D   lt div class  div1  gt  lt  div gt  x000D   x000D   lt div class  div1  gt  lt  div gt  x000D   x000D   lt div class  div1  gt  lt  div gt  x000D   x000D   lt div class  div1  gt  lt  div gt  x000D     x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    Best way to test it is to create a local html file  I guess   You can also apply that on other elements  such as any scrolling box  While using inspector mode  it could be that you have to put the overflow to hidden and then back to anything else  It probably needed to refresh  After that it should be possible working on scrollbar without having to refresh it again  Just note that was for the inspector mode

User · Answer

scrollable-content         overflow-x hidden        overflow-y scroll     manage scrollbar content overflow settings            scrollable-content  -webkit-scrollbar         width 30px     manage scrollbar width here            scrollable-content  -webkit-scrollbar           background transparent     manage scrollbar background color here            scrollable-content  -webkit-scrollbar-thumb         background rgba 255 0 0 0 1   important     manage scrollbar thumb background color here

User · Answer

Embed this code in your css     -webkit-scrollbar       width  0px         Track       -webkit-scrollbar-track       -webkit-box-shadow  none         Handle       -webkit-scrollbar-thumb       background  white      -webkit-box-shadow  none       -webkit-scrollbar-thumb window-inactive       background  none

User · Answer

To control the background-color of the scrollbar  you need to target the primary element  instead of -track     -webkit-scrollbar       background-color  blue       -webkit-scrollbar-track       -webkit-box-shadow  inset 0 0 6px rgba 0  0  0  0 3       I haven t succeeded in rendering it transparent  but I did manage to set its color   Since this is limited to webkit  it is still preferable to use JS with a polyfill  CSS customized scroll bar in div

User · Answer

if you don t have any content with 100  width  you can set the background color of the track to the same color of the body s background

User · Answer

With pure css it is not possible to make it transparent  You have to use transparent background image like this     -webkit-scrollbar-track-piece start       background  transparent url  images backgrounds scrollbar png   repeat-y  important       -webkit-scrollbar-track-piece end       background  transparent url  images backgrounds scrollbar png   repeat-y  important

[html] Transparent scrollbar with css

Examples related to html

Examples related to css

Examples related to scrollbar