css3 自定义滚动条样式
::-webkit-scrollbar :滚动条整体部分
::-webkit-scrollbar-thumb :滚动条里面的小方块样式
::-webkit-scrollbar-track 滚动条的轨道
::-webkit-scrollbar-button 滚动条轨道两端的小按钮,允许通过点击微调小方块的位置
::-webkit-scrollbar-track-piece 内层轨道,
::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处
::-webkit-resizer 两个滚动条交汇处上用于通过拖动调整元素大小的小控价
/* Let's get this party started */
::-webkit-scrollbar {
width: 5px;
} /* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 5px;
border-radius: 21px;
} /* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius:5px;
border-radius: -9px;
background: #2f732f;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: #6a9a6d;
}
css3 自定义滚动条样式的更多相关文章
- CSS3自定义滚动条样式
原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...
- CSS3自定义滚动条样式 -webkit-scrollbar(转)
有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...
- CSS3自定义滚动条样式 -webkit-scrollbar
今天写项目碰上需要改滚动条效果,我的第一反应是,需要用js写滚动条,顿时头大,上网搜了一下,原来css3就可以修改滚动条样式了,非常好啊,下面分享原文地址:http://www.xuanfengge. ...
- CSS3自定义滚动条样式 之 -webkit-scrollbar
有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...
- CSS3自定义滚动条样式 -webkit-scrollbar (一)
Webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式.当然,兼容所有浏览器的滚动条样式目前是不存在的. 滚动条的组成: ::-webkit-scroll ...
- 滚动条样式优化(CSS3自定义滚动条样式 -webkit-scrollbar)
有时候觉得浏览器自带的原始滚动条不是很美观,那webkit浏览器是如何自定义滚动条的呢? Webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式.当然,兼 ...
- CSS3自定义滚动条样式-webkit内核
自定义滚动条实现 此部分针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下: 滚动条组成部分 1. ::-webkit-scrollbar 滚动条整体部分 2. ::-webkit ...
- CSS3自定义滚动条样式方法
该代码收集于网上资源,非原创 /*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 10px; /*对垂直流动条有效*/ height: ...
- css3美化滚动条样式
1.改变浏览器默认的滚动条样式 ::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色,还可以设置边框属性 background-color:#f8f8f8; } : ...
随机推荐
- VMWare14 安装Mac OS系统(图解)
★ 背景 瞅了瞅自己干瘪的钱包,没忍心入手期待已久的 macPro,只好在虚拟机里玩一下 mac好了,等以后钱包傲气的时候再来个真实的. 安装环境: windows10 VMWare14.2 一.准备 ...
- 浅谈linux线程切换问题
http://www.jb51.net/article/102059.htm 处理器总处于以下状态中的一种: 1.内核态,运行于进程上下文,内核代表进程运行于内核空间 2.内核态,运行于中断上下文,内 ...
- whatis命令,一个非常有用的命令
比如我不知道yum的配置文件yum.conf怎么用,就可以whatis yum.conf,
- mysql 案例 ~ 常见案例汇总
一 简介:这里汇总了一些mysql常见的问题二 案例场景 问题1 mysql设置了默认慢日志记录1S,为何会记录不超过1S的sql语句 答案 mysql~log_queries_not_usi ...
- Android中高级工程师面试题
https://www.cnblogs.com/huangjialin/p/8657565.html(存在不少答案错误,可参照知识点复习,答案不可全信) 上 https://www.cnblogs. ...
- IDEA在同一窗口导入多个项目
在同一窗口打开多个项目 1. 当前窗口: 2. 3. 选择import module即可.然后一直点击next导入OK即可. 同一窗口目录下创建多个项目 1.File→New→Module 2.Ja ...
- laravel 关闭 csrf 验证 TokenMismatchException
csrf验证失败 注释掉kernel.php 的 csrf 行代码
- android listView功能简介
本文参考连接:http://blog.csdn.net/kesenhoo/article/details/7196920 android中listView是非常常用的组建,下边就经常用到的功能做一下简 ...
- Java内存模型[转]
原文:http://www.cnblogs.com/nexiyi/p/java_memory_model_and_thread.html 1. 概述 多任务和高并发是衡量一台计算机处理器的能力重要指标 ...
- 【Linux-Redhat】新手需要知道的Linux命令
好像接触运维有一年的时间了吧,查的资料什么的,也算是挺多的了.再加上最近看的<Linux就该这么学>,也算是把自己最近学的东西系统化了一下.今天就来说说,常用的Linux命令有什么,如果你 ...