我第一次与真正令人着迷的卷轴相遇是在这个网站上。 CSS-tricks V17的发射以其令人难以置信的大胆和视觉震撼的卷轴的发射留下了持久的印象。
我很惊讶。这样的设计元素能否在专业网站上如此有影响力？微妙的梯度，宽敞的曲线，无缝混合的背景以及纯粹的厚度 - 这是一个大胆而创新的设计选择。卷轴的触觉吸引力是不可否认的。它邀请互动只是为了欣赏其视觉重量。它是大胆的，前卫的，并且令人愉悦的可访问，甚至在较旧的浏览器上优雅地退化。
虽然当前的CSS技巧滚动栏更加精致和低调（黑色上的浅灰色），但它仍然保持其品牌标识，并巧妙地展示了梯度效果。但是，它的分心较小，确保它不会干扰阅读体验。在我们效率驱动的世界中，优先考虑MVP和80/20规则，自定义滚动条代表了真正的工艺。他们传达了对单词无法传达的细节的关注程度。
标准化工作（正在进行更多）简化了API：七个伪元素和11个伪级几乎针对滚动条的各个方面和状态。虽然这听起来很广泛，但仅掌握三个就足以令人印象深刻的自定义：
<code>body::-webkit-scrollbar { /* required - the "base" of the bar - mostly for setting width */ } body::-webkit-scrollbar-track { /* the "track" of the bar - ideal for customizing "background" colors */ } body::-webkit-scrollbar-thumb { /* the draggable element—the star of the show! */ }</code>这些工作像其他选定的元素一样，允许应用不同的CSS技术。媒体查询，背景梯度，透明度和边缘（使用各种CSS单元）都有效地发挥作用。 （但是，并非一切皆有可能；我很想在滚动栏上造型光标，以获得真正的复古感觉）。通过Lea Verou的CSS背景梯度进行实验，导致了一个非常规的，尽管个性化的滚动式设计，但它是拇指的条纹理发杆和曲目透明的心脏。无可否认，这是独一无二的，在我实施更微妙的版本后，在我的工作场所获得了绰号“ Swyxbar”。
每个前端开发人员都应至少一次推动Scrollbar自定义的界限。但是，至关重要的是避免创建违反用户期望的滚动条，尤其是在广泛使用的产品中（如Google Wave所证明的那样）。
以上是用自定义的滚动栏撑起你的东西的详细内容。更多信息请关注PHP中文网其他相关文章！
