当前位置: 首页 > 面试题库 >

如何使用css更改滚动条颜色

古棋
2023-03-14
问题内容

我尝试更改滚动条的颜色,但是在这里它不起作用。

CSS:

.flexcroll {     
    scrollbar-face-color: #367CD2;
    scrollbar-shadow-color: #FFFFFF;
    scrollbar-highlight-color: #FFFFFF;
    scrollbar-3dlight-color: #FFFFFF;
    scrollbar-darkshadow-color: #FFFFFF;
    scrollbar-track-color: #FFFFFF;
    scrollbar-arrow-color: #FFFFFF;
}​

问题答案:

您可以为webkit使用以下属性,这些属性可以连接到 影子DOM

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

这是一个带有红色滚动条的工作小提琴,基于此页面上的代码解释了这些问题。

使用此解决方案和您的解决方案,您可以处理除Firefox之外的所有浏览器,Firefox在这一点上我认为目前仍需要JavaScript解决方案。



 类似资料:
  • 问题内容: 有什么办法可以使用CSS从左到右或从下到上更改滚动条的位置? 问题答案: 仅使用CSS: 左右翻转: 工作小提琴 顶部/底部翻转: 工作小提琴

  • 我想将JScrollPane滚动条颜色更改为黑色。我试图使用UIManger进行更改。但什么也没找到。

  • 问题内容: 我想在Firefox中更改滚动条颜色。我怎样才能做到这一点? 问题答案: 在Firefox中更改滚动条颜色并不像在Internet Explorer和Opera中那样简单。Firefox仅允许通过主题设置滚动条的样式。这是一件好事。许多用户不喜欢界面设计师随心所欲地随意更改界面小部件的外观。对于可能使用高对比度主题的视障访客来说,更改界面部件的外观甚至可能是一个更大的问题。 就是说,如

  • 我用html、jquery和css动画构建了一个“粘性头”。但有一件小事不能正常工作。 在这种情况下,棒头将是活动的,菜单的背景颜色从白色切换到绿色(带有动画)。 现在我需要一个函数,它将颜色从绿色切换回白色(与动画),如果头不再粘(=类粘将移除)。 我怎么才能意识到这一点呢? null null

  • 我的导航栏有一个白色背景,但在登录页上它应该是透明的,当我向下滚动时它应该是白色的,在其他页面上它应该是白色的。 我使用的代码来自:滚动后更改导航栏颜色? 编辑: 所以我在下面的答案中添加了一个小提琴,但不知何故它不起作用 https://jsfiddle.net/jy6njukm/ 这是我的代码: javascript: 这里是我的navbar css: 我有我的导航栏html只有 我的home

  • 主要内容:1. overflow,2. overflow-x、overflow-y通过《 CSS盒子模型》一节的学习我们知道,页面中的每个元素都可以看作是一个矩形的盒子,我们可以使用 CSS 来控制盒子的大小、位置等等信息。默认情况下,当元素中的内容超出盒子的大小时,例如元素内容区的宽度和高度所组成的矩形区域中不足以容纳元素中的内容时,一部分内容就会溢出盒子。 1. overflow 为了能更好的处理溢出的内容,CSS 中提供了一个名为 overflow 的属性,该属性可以设置