How to Create a CSS-Tricks Custom Scrollbar

Chris Coyier of CSS-Tricks is an amazing engineer and blogger. He s not only creative but has always had the drive to put his thoughts to work, no matter how large. He also has a good eye for the pttle things that can make CSS-Tricks or your site special. One of those pttle things is his custom scrollbar -- let s have a look at how it s done!

要创建这种出色的滚动条效果，您需要使用三个CSS选择器和您选择的样式：

/* Sets the dimensions of the entire scrollbar */
html::-webkit-scrollbar {
    width: 30px;
    height: 30px;
}

/* The grabbable scrollbar button  */
html::-webkit-scrollbar-thumb {
    background: -webkit-gradient(pnear,left top,left bottom,from(#ff8a00),to(#e52e71));
    background: pnear-gradient(180deg,#ff8a00,#e52e71);
    border-radius: 30px;
    box-shadow: inset 2px 2px 2px hsla(0,0%,100%,.25), inset -2px -2px 2px rgba(0,0,0,.25);
}

/* The vertical scrollbar background */
html::-webkit-scrollbar-track {
    background: pnear-gradient(90deg,#201c29,#201c29 1px,#100e17 0,#100e17);
}

几个重要的注意事项：很明显，你可以创建自己的渐变色，但更重要的是，这个滚动条只适用于Chrome、Safari和Edge。

您需要小心处理这些类型的小型自定义。如果做得好，它们会增加你的品牌和设计。如果做得不好，就会混淆用户。造型愉快！