透明なスクロールバートラック（div）

Question

私が試した方法は問わず、スクロールバートラックが表示され、その下のコンテンツが非表示になります。私はその下のコンテンツを見たいと思っています。いつもトラックを見るのと混同しないでください。

私はまだ親指を見たいです。

理想的な結果：私が試したhttp://lab.cubiq.org/iscroll/examples/simple/

もの：

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

が動作しない、スクロールバーのトラックがまだ下にコンテンツを隠して、表示されました。

::-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; 
} 

同じ話

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

が

Answer 1

動作しないこれは動作しますが、クロム&は親指を隠し、その唯一のために注意してください必要があります。あなたの例を見て、私はそれがあなたが望むものだと思った。あなたが親指を隠すことにしたくない場合

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

、なぜあなたはこれを試してみません：

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 */ 
} 

注：padding-rightはほとんどの時間を必要がない場合もあります。

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> 

は、このリンクをチェックしてください： - 親指を隠します