如何使用CSS在div上获得滚动条？

Question

如果我使用CSS overflow属性：

overflow: scroll; 

我得到默认薄滚动条。我如何设计它以获得一个胖胖（平坦）的滚动条？

Answer 1

它应该为你工作的一个例子...

/* SCROLLBAR */ 
 
/* Let's get this party started */ 
 
::-webkit-scrollbar { 
 
    width: 100px; 
 
} 
 

 
/* Track */ 
 
::-webkit-scrollbar-track { 
 
    background: #f1f1f1; 
 
    background-clip: content-box; // this is important 
 
} 
 

 
/*buttons*/ 
 
::-webkit-scrollbar-button { 
 
    background: black; 
 
} 
 

 
/* Handle */ 
 
::-webkit-scrollbar-thumb { 
 
    background: #c1c1c1; 
 
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p> 
 

 
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. </p> 
 

 
<p>Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. </p> 
 

 
<p>Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. </p> 
 

 
<p>Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. </p> 
 

 
<p>Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. </p> 
 

 
<p>Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. </p> 
 

 
<p>Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. </p> 
 

 
<p>Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. </p> 
 

 
<p>In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. </p>

Answer 2

你可以在这里找到如何改变在多个浏览器滚动条的设计，一个答案：https://stackoverflow.com/a/14150577/1564840

但是，这意味着每一个浏览器（IE/Chrome浏览器/ Mozilla浏览器..）不同的CSS设置。这就是为什么我建议你使用JavaScript库，这里有几个例子：http://www.jqueryrain.com/2012/07/jquery-scrollbar-plugin-examples/。这些js库为大多数浏览器提供支持。

如果您选择编辑CSS，请小心，因为“位置”属性会影响滚动显示。您可能会在Safari浏览器或移动设备上发现一些问题。

Answer 3

更改滚动条从来就不是一个好主意。有一些解决方案可以用javascript或仅用CSS（用于webkit浏览器）更改滚动条，但我不推荐它。滚动条由浏览器呈现，JavaScript自定义滚动条从不像默认浏览器那样行事，可能会导致问题，也可能导致跨浏览器不兼容。

你可以找到各种脚本，插件，修改滚动条的代码。

但无论如何，这里的只有CSS（WebKit的）的自定义滚动条

div { 
 
height:1200px; 
 
width:100%; 
 
background:red; 
 
} 
 
::-webkit-scrollbar { 
 
    width: 20px; 
 
    height: 20px; 
 
} 
 
::-webkit-scrollbar-button { 
 
    background: blue 
 
} 
 
::-webkit-scrollbar-track-piece { 
 
    background: yellow 
 
} 
 
::-webkit-scrollbar-thumb { 
 
    background: green 
 
}

<div> 
 
</div>