`

CSS3改变浏览器滚动条

    博客分类:
  • CSS
阅读更多
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 0px solid transparent;
  background-color:rgba(50,50,50,0.2)
}

::-webkit-scrollbar-track {
  box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset;
}

::-webkit-scrollbar-thumb {
  min-height: 20px;
  background-clip: content-box;
  box-shadow: 0 0 0 5px rgba(0,0,0,.3) inset;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

 CSS3滚动条-webkit-scrollbar简介

webkit现在支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式。

如果你想跳过介绍,直接看demo的话,请点击demo

滚动条是一个伪元素,可以自定义样式。这个伪类可以将webkit自身的滚动条渲染关闭,只按照用户自定义的css信息进行渲染。比如:

::-webkit-scrollbar {

width: 13px;

height: 13px;

}

width和height属性分别表示纵向滚动条的宽度和横向滚动条的高。也可以指定为%百分比,在在这种情况下就代表了,滚动条占整个视窗的百分比,如:

::-webkit-scrollbar {

width: 50%;

}

滚动条包括:滚动按钮和一个轨道。轨道本身有进一步氛围轨道碎片(track pieces)和一个滑块。轨道碎片值滑块上方和下面的区域。滚动条的角合适被设置为各种风格,比如可以调整文本区域的大小。

下面是关于滚动条的所有伪元素:

::-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*/}

任何对象都可以设置:边框、阴影、背景图片等等,创建的滚动条任然会按照操作系统本身的设置来完成其交互的行为。下面的伪类可以应用到上面的伪元素中。

:horizontal(horizontal伪类适用于任何水平方向上的滚动条)

:vertical(vertical伪类适用于任何垂直方向的滚动条)

:decrement(decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片,例如可以使区域向上或者向右移动的区域和按钮)

:increment(increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片,例如可以使区域向下或者向左移动的区域和按钮)

:start(start伪类适用于按钮和轨道碎片。表示对象(按钮 轨道碎片)是否放在滑块的前面)

:end(end伪类适用于按钮和轨道碎片。表示对象(按钮 轨道碎片)是否放在滑块的后面)

:double-button(double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。)

:single-button(single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。)

:no-button(no-button伪类表示轨道结束的位置没有按钮。)

:corner-present(corner-present伪类表示滚动条的角落是否存在。)

:window-inactive(适用于所有滚动条,表示包含滚动条的区域,焦点不在该窗口的时候。)

::-webkit-scrollbar-track-piece:start {
   /*滚动条上半边或左半边*/
}

::-webkit-scrollbar-thumb:window-inactive {
   /*当焦点不在当前区域滑块的状态*/

}

::-webkit-scrollbar-button:horizontal:decrement:hover {
   /*当鼠标在水平滚动条下面的按钮上的状态*/

}

分享到:
评论

相关推荐

    CSS3改变浏览器滚动条样式

    CSS3为我们提供了一种改变浏览器默认滚动条样式的方法。在某些情况下,浏览器的默认滚动条样式可能会显得太宽或太丑陋,这会影响网页的美观度和用户的体验。虽然改变滚动条的外观对于网站的基本功能来说并不是必要的...

    vue自定义浏览器滚动条(兼容大部分浏览器含ie)_vue tree组件 下拉滚动条

    本篇文章将详细探讨如何在Vue项目中自定义浏览器滚动条,同时确保兼容大部分浏览器,包括较为古老的Internet Explorer(IE)。 首先,我们需要理解浏览器滚动条的工作原理。滚动条由两个主要部分组成:轨道(track...

    Html+CSS实现滚动条不挤占内容区宽度.zip

    在传统的 HTML 和 CSS 中,滚动条是内置于浏览器的,我们无法直接改变其样式。但是,随着 CSS3 的发展,现代浏览器(如 Chrome、Firefox 和 Safari)引入了 `::-webkit-scrollbar` 和 `::-webkit-scrollbar-thumb` ...

    IE滚动条 CSS样式

    然而,这些样式仅限于颜色、宽度和边框,不能像现代浏览器那样改变滚动条的整体结构。 1. **IE滚动条的基本样式属性**: - `-ms-scrollbar-base-color`: 设置滚动条轨道的颜色。 - `-ms-scrollbar-arrow-color`: ...

    四种漂亮的滚动条样式

    需要注意的是,不是所有浏览器都支持这些CSS滚动条样式属性。尤其是Internet Explorer较旧的版本,以及一些移动设备的浏览器可能不支持。因此,在实际应用中,开发者应考虑使用浏览器前缀(如 `-webkit-`)来确保在...

    jQuery+CSS3横向纵向滚动条代码.rar

    在自定义滚动条的设计中,CSS3的伪元素(::webkit-scrollbar, ::webkit-scrollbar-thumb等)可以用来改变滚动条的外观,如宽度、颜色、背景、边框等。CSS3的过渡和动画则可以实现滚动条滑动时的平滑效果。 具体实现...

    纯CSS实现的表格滚动条效果

    CSS3引入了一些新的伪元素和属性,如`::-webkit-scrollbar`、`::-webkit-scrollbar-thumb`和`::-webkit-scrollbar-track`,它们允许我们自定义滚动条的外观。例如,我们可以设置滚动条的宽度、颜色、背景以及鼠标...

    易语言CSS样式滚动条

    CSS样式滚动条允许开发者自定义浏览器中滚动条的外观,使其与网页设计保持一致,提升用户体验。 首先,我们要理解CSS样式滚动条的基本概念。CSS(层叠样式表)是用于描述网页及应用程序用户界面外观和表现的样式...

    原生js scrollbars滚动条插件设置浏览器竖直滚动条美化.rar

    原生JS提供了对滚动条进行控制的方法,例如通过CSS3的伪元素`::-webkit-scrollbar`和`::-webkit-scrollbar-thumb`来改变滚动条的样式。然而,这些方法仅适用于Webkit内核的浏览器(如Chrome、Safari),对于Firefox...

    css3 滚动条美化

    CSS3滚动条美化是网页设计中的一个重要技巧,它允许开发者通过CSS样式来改变浏览器默认的滚动条样式,提升用户体验和界面美观度。在现代网页设计中,滚动条不仅仅是功能性的工具,也是展示网站设计风格和品牌特色的...

    css3背景图片页面滚动视差效果

    在视差滚动中,我们可以通过JavaScript或者CSS的`calc()`函数动态改变这个属性值,实现背景图在滚动过程中的平滑移动。例如,可以设定一个初始位置,然后在滚动事件触发时,根据滚动距离调整位置。 为了实现视差...

    flex滚动条三种实现方式

    3. **JavaScript库或CSS框架实现滚动条**: 对于更高级的自定义,开发者可以使用JavaScript库(如Perfect Scrollbar、SimpleBar等)或者CSS框架(如Bootstrap、Materialize等)来实现。这些库通常提供了丰富的选项...

    e语言-易语言CSS样式滚动条

    在本案例中,“易语言CSS样式滚动条”是指使用易语言来实现对滚动条外观的自定义,通过应用CSS(层叠样式表)样式来改变滚动条的视觉效果。CSS样式滚动条的实现通常是通过JavaScript或者特定的库来完成的,而在...

    原生js scrollbars滚动条插件设置浏览器竖直滚动条美化

    为了实现自定义的滚动条,我们需要使用CSS3的伪元素`::webkit-scrollbar`和`::webkit-scrollbar-thumb`来修改滚动条的外观。例如: ```css /* 隐藏默认滚动条 */ body::-webkit-scrollbar { width: 0; } /* ...

    DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏.docx

    - **自定义滚动条**:通过CSS可以改变滚动条的颜色、大小、样式等。 2. **基本CSS滚动条属性** - **`::-webkit-scrollbar`**:选择整个滚动条。 - **`::-webkit-scrollbar-track`**:选择滚动条轨道。 - **`::-...

    jQuery+CSS3实现彩色网页滚动条.zip

    值得注意的是,上述CSS3滚动条的样式仅适用于基于Webkit内核的浏览器,如Chrome和Safari。对于Firefox和Internet Explorer,你需要使用它们各自的私有属性来实现类似的效果。对于跨浏览器兼容性问题,可以使用...

    CSS自定义WebKit内核浏览器滚动条实现代码

    传统的浏览器滚动条通常是浏览器自身提供的默认样式,但随着Web标准的发展,特别是CSS的进步,开发者现在可以使用CSS来自定义WebKit内核浏览器(例如Chrome和Safari)的滚动条样式,而不必依赖于非标准的扩展或...

    自定义美化滚动条插件

    描述中的“JQ浏览器滚动条插件 浏览器滚动条美化JQ浏览器滚动条插件 浏览器滚动条美化”强调了这个插件主要针对jQuery库,并且其核心功能是美化浏览器的滚动条。jQuery是一个广泛使用的JavaScript库,它简化了DOM...

Global site tag (gtag.js) - Google Analytics