css3 滚动条一直显示

CSS3滚动条一直显示

默认情况下，浏览器会在需要时自动显示滚动条。但如果您希望滚动条始终可见，则可以使用CSS3的新功能。

以下代码演示了如何为所有滚动区域定义永久可见的滚动条：

::-webkit-scrollbar {
     /* Chrome/Safari/Webkit */ width: 12px;
     height: 12px;
 }
 ::-webkit-scrollbar-track {
     background-color: #f5f5f5;
 }
 ::-webkit-scrollbar-thumb {
     border-radius: 999px;
     background-color: #c1c1c1;
 }
 ::-webkit-scrollbar-thumb:hover {
     background-color: #a2a2a2;
 }

请注意，这些样式仅影响支持Webkit的浏览器（如Chrome和Safari）。如果要支持其他浏览器，请使用不同的前缀。

如果您希望在特定区域中显示永久可见的滚动条，则可以为该区域定义单独的样式。例如，以下代码为ID为“myDiv”的DIV元素定义了永久可见的滚动条：

#myDiv::-webkit-scrollbar {
     /* Chrome/Safari/Webkit */ width: 12px;
     height: 12px;
 }
 #myDiv::-webkit-scrollbar-track {
     background-color: #f5f5f5;
 }
 #myDiv::-webkit-scrollbar-thumb {
     border-radius: 999px;
     background-color: #c1c1c1;
 }
 #myDiv::-webkit-scrollbar-thumb:hover {
     background-color: #a2a2a2;
 }
    

请尝试在CSS中使用这些代码，以便在您的网站上创建永久可见的滚动条。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！