Question

无论我尝试什么方法，都会显示滚动条轨道并隐藏下面的内容。我希望看到下面的内容 - 不要总是看到轨道。

我仍然想看到拇指。

理想的结果：https://www.youtube.com/watch?v=WVlNl4JDzL4

我尝试的事情：

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

这应该可行，但请注意它仅适用于Chrome＆amp;隐藏拇指。看看你的例子，我认为这就是你想要的。

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

请检查此链接： - https://css-tricks.com/almanac/properties/s/scrollbar/

透明滚动条轨道（div）

2 个答案: