Transparent scrollbar track (div) - html

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

Answer 1

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.

Answer 2

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/