webkit自定义滚动条

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-thumb:vertical{
    background-color:#A5A5A5;
    outline:2px solid #F6F6F6;
    outline-offset:-2px;
    border: 2px solid #F6F6F6;
    -webkit-border-radius:6px;
}
::-webkit-scrollbar-thumb:hover{
    background-color:#bcbcbc;
}
时间： 2024-12-26 07:41:50

webkit自定义滚动条的相关文章

CSS自定义滚动条样式

相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器自带的滚动条样式,但是这样只能规避还是解决不了问题,最近在项目中遇到了,正好来总结一下.当然,兼容所有浏览器的滚动条样式目前是不存在的. IE下的滚动条样式 IE是最早提供滚动条的样式支持,好多年了,但是其它浏览器一直没有支持,IE独孤求败了. 这些样式规则很简单: scrollbar-arrow-color: color; /*三角箭头的颜色*/ scrollbar-face-color: color; /*立

CSS3自定义滚动条样式

写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对webkit内核的浏览器啊啊啊啊啊! overflow介绍 定义:overflow 属性指定当它溢出其块级容器时,是否剪辑内容,渲染滚动条或显示内容. 属性值 overflow:visible //默认值.内容不会被修剪,超出内容会显示在元素框之外 overflow:hidden //内容会被修剪.超出内容被隐藏 ove

CSS3自定义滚动条样式 之 -webkit-scrollbar

有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的.当然,兼容所有浏览器的滚动条样式目前是不存在的. 演示 来看看这2个滚动条demo:demo1(图片版).demo2(纯CSS3版) 滚动条组成 ::-webkit-scroll

CSS3自定义滚动条样式 -webkit-scrollbar (一)

Webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式.当然,兼容所有浏览器的滚动条样式目前是不存在的. 滚动条的组成: ::-webkit-scrollbar         滚动条整体部分  ::-webkit-scrollbar-thumb             滚动条里面的小方块,能上下左右移动(取决于是垂直滚动条还是水平滚动条)  ::-webkit-scrollbar-track      滚动条的轨道(里面装有thumb)  ::-w

CSS3自定义滚动条样式 -webkit-scrollbar

http://blog.csdn.net/hanshileiai/article/details/40398177#t1 有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的.当然,兼容所有浏览器的滚动条样式目前是不存在的. 演示

【转】CSS3自定义滚动条样式

overflow介绍 定义:overflow 属性指定当它溢出其块级容器时,是否剪辑内容,渲染滚动条或显示内容. 属性值 overflow:visible //默认值.内容不会被修剪,超出内容会显示在元素框之外 overflow:hidden //内容会被修剪.超出内容被隐藏 overflow:scroll //内容会被修剪,浏览器会显示滚动条以便查看其余内容 overflow:auto //如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容. overflow:inherit //规定从该

利用CSS3新特性实现完全兼容的自定义滚动条。

背景:最近项目里面因为统一页面风格,用到了自定义滚动条,在完成之前的那个滚动条的时候,与网上各个滚动条插件实现的方法类似,相当于造了轮子,通过css3的 网上看到的滚动条插件多数是通过监听内容的滚动事件,由于原生js的滚动事件存在一些bug,所以实际上用jQuery的mousewheel.js插件的比较多,自己做的滚动条也是引用了该插件. 首先说一说自定义滚动条实现的普遍步骤和方法: 背景: A需要滚动. 1.给A添加一个父级S包裹,并将B进行绝对或相对定位(这点根据S的定位,目的是为了保持原有

iPhone手机解锁效果&&自定义滚动条&&拖拽--Clone&&窗口拖拽（改变大小/最小化/最大化/还原/关闭）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

自定义滚动条

<!DOCTYPE HTML><html><head><title>自定义滚动条</title><meta charset="UTF-8"><link rel="stylesheet" href="reset.css" type="text/css" /><script type="text/javascript" s