遗憾的是,在CSS Scrollbars Styling Module Level 1一期滚动条规范中,这个属性的功能被设置的非常弱。 不要说分别设置滑块和轨道的宽度,scrollbar-width目前甚至不支持接受一个宽度数值。 什么意思呢?也就是,当前scrollbar-width只接收 3 个关键字: 代码语言:javascript 代码运行次数:0 运行 AI代码解释 {/* Keywo...
遗憾的是,在CSS Scrollbars Styling Module Level 1一期滚动条规范中,这个属性的功能被设置的非常弱。 不要说分别设置滑块和轨道的宽度,scrollbar-width目前甚至不支持接受一个宽度数值。 什么意思呢?也就是,当前scrollbar-width只接收 3 个关键字: { /* Keyword values */ scrollbar-width: auto; scrollbar-w...
遗憾的是,在CSS Scrollbars Styling Module Level 1一期滚动条规范中,这个属性的功能被设置的非常弱。 不要说分别设置滑块和轨道的宽度,scrollbar-width目前甚至不支持接受一个宽度数值。 什么意思呢?也就是,当前scrollbar-width只接收 3 个关键字: {/* Keyword values */scrollbar-width: auto; scrollbar-width...
遗憾的是,在CSS Scrollbars Styling Module Level 1一期滚动条规范中,这个属性的功能被设置的非常弱。 不要说分别设置滑块和轨道的宽度,scrollbar-width目前甚至不支持接受一个宽度数值。 什么意思呢?也就是,当前scrollbar-width只接收 3 个关键字: {/* Keyword values */scrollbar-width: auto; scrollbar-width...
CSS: 先把body的间距置为0 * { margin: 0; padding: 0; } html { overflow-y: scroll; } JS: 用视口的innerWidth减去body就是滚动条的宽度 console.log('chrome下滚动条的宽度', window.innerWidth - document.body.clientWidth) 可以得出chrome浏览器下,宽度为17px,我在jsfiddle中写的话打印出来是16px...
遗憾的是,在CSS Scrollbars Styling Module Level 1一期滚动条规范中,这个属性的功能被设置的非常弱。 不要说分别设置滑块和轨道的宽度,scrollbar-width目前甚至不支持接受一个宽度数值。 什么意思呢?也就是,当前scrollbar-width只接收 3 个关键字: {
webkit的伪类和伪元素的实现很强,可以把滚动条当成一个页面元素来定义,再结合一些高级的 CSS3 属性,比如渐变、圆角、RGBa 等等。 任何对象都可以设置:边框、阴影、背景图片等等,创建的滚动条任然会按照操作系统本身的设置来完成其交互的行为。 下面的伪类可以应用到上面的伪元素中。
而scrollbar-color和scrollbar-width是官方标准,在CSS Scrollbars Styling Module Level 1规范中被提出。 本文,我们就将一起学习看看这两个属性的使用。 scrollbar-color 设置滚动条颜色 顾名思义,scrollbar-color 就是用于设置滚动条颜色的。 不过有意思的是,一个完整的滚动条,其实是有多个小组件组成的,所以能设...
用我们新学的知识创建一个暗色主题的滚动条，它的边框是圆形的（灵感来自 CSS Tricks 网站）：html::-webkit-scrollbar { width: 20px; } html::-webkit-scrollbar-track { background-color: black; } html::-webkit-scrollbar-thumb { background: #4e4e4e; border-radius: 25px...
关于无法使用CSS将宽度和高度应用于-webkit-scrollbar,这是因为-webkit-scrollbar是一个伪元素,而不是一个真实的DOM元素,因此无法直接使用CSS来设置其宽度和高度。不过,我们可以通过设置滚动条的样式来实现类似的效果。 以下是一个示例代码,可以使用CSS来设置滚动条的样式: ...