页面中有许多内容过多时,为了不影响整体布局,总会有滚动效果代替。but,许多情况浏览器自带的滚动条样式与整体UI 界面不搭啊,怎么办,当然作为界面的化妆师CSS就出手啦~

滚动条样式由多个伪类组成 下面是我的小栗子

::-webkit-scrollbar{width: 10px;height: 10px;background: #013b8e;}

/* 滚动槽 */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(33,68,124,1);
border-radius: 10px;
background: #021b49;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb{
border-radius: 10px;
background: #013b8e;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: #013b8e;
}
/* 边角 即两个滚动条的交汇处 */
::-webkit-scrollbar-corner{
background: #021b49;
border-radius: 10px;
}
/* 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件*/
::-webkit-resizer{
}

效果图

CSS 个性化滚动条样式的更多相关文章

  1. CSS设置滚动条样式

    因为在现在的大部分项目中很多都用到了滚动条,有时候用到模拟的滚动条,现在说下滚动条的CSS也能解决. 比如网易邮箱的滚动条样子很好看,就是利用的CSS来设置的,而且是webkit浏览器的.如图所示: ...

  2. CSS设置滚动条样式[转]

    原文转载地址:http://www.javascript100.com/?p=756 webkit浏览器css设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可 ...

  3. 转载自前端开发:CSS设置滚动条样式

    浏览器默认的滚动条样子太过屌丝了,得自己动手整整.记得IE浏览器有几个设置滚条的样式,不过比较鸡肋,只能设置颜色之类的,而且webkit下面也不支持.无意间看到网易邮箱的滚动条样子很好看,一开始以为是 ...

  4. CSS自定义滚动条样式

    原文地址:http://www.qianduan.net/css-custom-scroll-bar-style/ 相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器 ...

  5. CSS 控制滚动条样式

    /*作为IT界最前端的技术达人,页面上的每一个元素的样式我们都必须较真,就是滚动条我们也不会忽略.下面我给大家分享一下如何通过CSS来控制滚动条的样式,代码如下:*/ 1 /*定义滚动条轨道*/ #s ...

  6. css改变滚动条样式

    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 10px; height: 12px; background-color: #F5 ...

  7. 使用CSS设置滚动条样式以及如何去掉滚动条的方法

    <STYLE> BODY { SCROLLBAR-FACE-COLOR: #f892cc; SCROLLBAR-HIGHLIGHT-COLOR: #f256c6; SCROLLBAR-SH ...

  8. css中滚动条样式的设置

    参数说明: 1.overflow-y : 设置当对象的内容超过其指定高度时如何管理内容:overflow-x : 设置当对象的内容超过其指定宽度时如何管理内容. 参数: visible:扩大面积以显示 ...

  9. CSS修改滚动条样式

    <div class="qq_bottom">超出部分变滚动条</div> /*//滚动条整体部分*/ .qq_bottom::-webkit-scroll ...

随机推荐

  1. Linux SSH远程链接 短时间内断开

    Linux SSH远程链接 短时间内断开 操作系统:RedHat 7.5 问题描述: 在进行SSH链接后,时不时的就断开了 解决方案: 修改 /etc/ssh/sshd_config 文件,找到 Cl ...

  2. vue 微信内H5调起支付

    在微信内H5调起微信支付,主要依赖于一个微信的内置对象WeixinJSBridge,这个对象在其他浏览器中无效. 主要代码: import axios from 'axios'; export def ...

  3. 递归系列——树型JSON数据转换问题

    JSON数据转换方式: 1.标准结构=>简单结构 var root = { id: 'root', children: [ { id: "1", children: [ { ...

  4. 解决“google快照无法打开”的简单而有效的方法~

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/yangle20081982/article/details/25892553        解决&q ...

  5. qbao

    # -*- coding: utf-8 -*- import Image, cStringIO, webbrowser, re, time, math import urllib, urllib2, ...

  6. HDU - 1875_畅通工程再续

    畅通工程再续 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Problem Desc ...

  7. 如何编写go代码

    go是一种静态编译型的语言,它的编译速度非常快. go的官方编译器称为gc,包括编译工具5g,6g和8g,连接工具5l,6l和8l.其中的数字表示处理器的架构.我们不必关心如何挑选这些工具,因为go提 ...

  8. MaxCompute 费用暴涨之存储压缩率降低导致SQL输入量变大

    现象:同样的SQL,每天处理的数据行数差不多,但是费用突然暴涨甚至会翻数倍. 分析: 我们先明确MaxCompute SQL后付费的计费公式:一条SQL执行的费用=扫描输入量 ️ SQL复杂度 ️ 0 ...

  9. ES6对象的super关键字

    super是es6新出的关键字,它既可以当作函数使用,也可以当作对象使用,两种使用方法不尽相同 1.super用作函数使用的时候,代表父类的构造函数,es6规定在子类中使用this之前必须先执行一次s ...

  10. Win10系统使用Docker安装oracle并通过Navicat for oracle进行登录

    一.安装Docker Linux系统可以直接采用命令进行Docker安装: Win7系统安装Dokcer实际通过Boot2Docker在Windows下安装一个VirtualBox来实现: Boot2 ...