Transparent scrollbar track (div)

Question

Whatever method I try, the scrollbar track is displayed and hides the content underneath. I would like to see the content underneath - not to be confused with always seeing the track.

I still want to see the thumb.

Ideal result: http://lab.cubiq.org/iscroll/examples/simple/

Things I tried:

::-webkit-scrollbar-track {    
  display: none !important;    
}

Does not work, scrollbar track still displayed, hiding the content beneath.

::-webkit-scrollbar-track-piece:start {
    background: transparent url('http://myServer/transparent.png') repeat-y !important;
}

::-webkit-scrollbar-track-piece:end {
    background: transparent url('http://myServer/transparent.png') repeat-y !important;
}

Same story

::-webkit-scrollbar-track {    
    background:transparent;
    border-radius: 0px;        
}

Does not work

Nikhil Nanjappa · Answer 1 · 2016-09-06T16:15:24.690

0

This should work, but please note its only for Chrome & hides the thumb. Looking at your examples I assumed that's what you want.

::-webkit-scrollbar {
   display: none;
}

If you don't want your thumb to be hidden, why don't you try this:

 html{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

 body{
    height: 100%;
    width: 100%;
    overflow: auto;
    padding-right: 17px; /* keep it as 0 initially & check OR Increase/Decrease this value for cross-browser compatibility */
}

Note: padding-right might not be necessary most of the time.

edited Sep 06 '16 at 16:15

answered Sep 06 '16 at 16:06

Nikhil Nanjappa

6,454
3
28
44

that will hide the thumb, no? – LucasSeveryn Sep 06 '16 at 16:07
Yes. I see you updated the question. I will give a solution for that then. – Nikhil Nanjappa Sep 06 '16 at 16:08

score 0 · Answer 2 · answered Sep 06 '16 at 16:40

html {
background: lightgrey;
height: 100%;
overflow: hidden;
 }
body {
height: 100%;
background: whitesmoke;
overflow: scroll;
width: 80%;
max-width: 600px; 
margin: 0 auto; 
padding: 3em; 
font: 100%/1.4 serif; 
border: 1px solid rgba(0,0,0,0.25)
 }
 p {
margin: 0 0 1.5em;
}
body::-webkit-scrollbar {
width: 1em;
 } 
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 }
body::-webkit-scrollbar-thumb { 
background-color: darkgrey; 
outline: 1px solid slategrey;
}




<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem deleniti accusantium quasi ab ad officia cupiditate sed aliquam nobis expedita velit dolorum perspiciatis pariatur nam vero et magnam soluta tempora!</div> 
<div>Eveniet deserunt consequatur porro molestiae nulla optio quis totam libero iste nemo odit eum facilis sapiente. Harum similique cupiditate voluptas ea optio sunt molestias eius ab qui obcaecati nesciunt id?</div>
<div>Necessitatibus delectus sint vitae eos quasi optio esse dignissimos enim laborum ipsum harum perspiciatis eaque. Magnam fugiat delectus neque laboriosam in accusamus a veniam inventore asperiores consequatur nihil quae quo.</div>
<div>Eligendi quaerat nesciunt sint nobis qui? Temporibus maiores esse molestiae hic cum culpa sed recusandae dolore sequi modi. Quos illum debitis odio consequatur voluptatum error aliquam rem similique officia recusandae.</div>
<div>Ex suscipit earum reiciendis eaque dolorem inventore accusantium modi voluptatum saepe cum quam tempora autem corrupti illum deleniti iure rerum mollitia quo ducimus soluta ea! Illum aliquid consectetur vitae quod?</div> 
<div>Minus rem tempora quo. Deleniti mollitia dignissimos laborum quis quos facilis dolore soluta error provident recusandae veniam minus consequatur blanditiis. Facere tempore praesentium soluta fugiat quia eligendi dolores ullam doloribus!</div>
<div>Aut nulla perferendis officiis accusamus ut aspernatur hic possimus amet blanditiis incidunt repudiandae ullam inventore ipsam recusandae nihil provident facilis totam quibusdam natus eligendi optio quia sapiente rerum quos illo?</div>
<div>Porro soluta nisi impedit voluptatem ex accusantium facilis amet quod blanditiis quia similique totam enim id ratione minus quo modi sequi nam dicta iste aliquid itaque velit accusamus quibusdam consequuntur.</div>
<div>Ab assumenda in ad nesciunt recusandae labore voluptates vero suscipit tenetur ullam sint beatae odio harum quo aperiam quas temporibus pariatur consectetur saepe eveniet minus voluptatem atque iusto similique repudiandae?</div>
 <div>In enim odit repellat maxime harum eum expedita fuga vel eaque quaerat optio hic sapiente eveniet neque dolorum eligendi pariatur possimus aliquid minus officiis mollitia quia voluptates sunt nulla est!</div>

Please check this link:-https://css-tricks.com/almanac/properties/s/scrollbar/

Transparent scrollbar track (div)

2 Answers2