/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
width: 5px;
height: 110px;
background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #bdbdbd;
}
/*滑块效果*/
::-webkit-scrollbar-thumb:hover
{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.4);
}

CSS设置浏览器滚动条样式的更多相关文章

  1. CSS——改变浏览器滚动条样式

    https://www.cnblogs.com/sun-rain/p/5789417.html

  2. 关于Angular+ngx-perfect-scrollbar自定义各大浏览器滚动条样式的解决方法

    资料: http://manos.malihu.gr/jquery-custom-content-scroller/  (此项是结合Jquery使用的,在此并未采用) https://www.npmj ...

  3. CSS系列——浏览器默认样式

    了解HTML标签在各浏览器当中的默认样式,可以让我们了解,为什么会要写Reset.css,Reset.css当中要怎么写样式最合理.试着思考下面的问题: 为什么会有默认样式? 每个浏览器的默认样式有什 ...

  4. css清除浏览器默认样式

    css清除浏览器默认样式(代替 *{}) 将代码放入 css 文件,使用 link 引入. /* v2.0 | 20110126 http://meyerweb.com/eric/tools/css/ ...

  5. css 改变浏览器滚动条的样式

    /*滚动条样式*/ .innerbox::-webkit-scrollbar {/*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px; } .i ...

  6. 在css中定义滚动条样式

    1,Overflow内容溢出时的设置 overflow 水平及垂直方向内容溢出时的设置 overflow-x 水平方向内容溢出时的设置 overflow-y 垂直方向内容溢出时的设置 以上三个属性设置 ...

  7. [分享]CSS美化浏览器滚动条

    今天看到一个站点的滚动条样式特别漂亮,顺便上网搜了一些相关资料,分享给大家: PS:兼容所有浏览器的滚动条样式目前是不存在的. IE下的滚动条样式 IE是最早提供滚动条的样式支持,好多年了,但是其它浏 ...

  8. css控制默认滚动条样式

    针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下: 滚动条组成部分 1. ::-webkit-scrollbar 滚动条整体部分 2. ::-webkit-scrollbar-t ...

  9. CSS3自定义浏览器滚动条样式

    一个完整滚动条右以下部分组成: ::-webkit-scrollbar 滚动条整体部分,常用属性:width,height,background,border: ::-webkit-scrollbar ...

随机推荐

  1. Unity3d如何profile模拟器

    最近有反馈X2在一些模拟器中运行偶尔非常卡,达到5秒左右,而这类问题在真机上没出现过,于是想用unity profile下模拟器.但模拟器是运行在虚拟机里面的,市面上大多模拟器并没有提供虚拟机网络设置 ...

  2. too much recursion(太多递归)Uncaught RangeError: Maximum call stack size exceeded BootstrapValidator报错

    在BootstrapValidator中已默认遵守Bootstrap规则,form里的每个输入项目必需包含在类为form-group的标签里,否则BootstrapValidator中定义的field ...

  3. MySQL主主复制(双主复制)配置过程介绍

    一.修改配置文件my.cnf服务器A(172.16.16.70)配置如下server_id = 70socket = /tmp/mysql.sockinnodb_buffer_pool_size = ...

  4. 【移动端 Web】怎么循序渐进地开发一个移动端页面

    1. 移动页面开发基础 1.1 像素——什么是像素 像素是 Web 页面布局的基础,那么到底什么才是一个像素呢? 像素:一个像素就是计算机屏幕所能显示一种特定颜色的最小区域.这是像素的概念,实际上,W ...

  5. 【Tomcat】Tomcat报错追踪

    应用部署上之后无法正常启动.tomcat启动日志例如以下: 信息: Starting service Catalina 2015-7-22 18:39:31 org.apache.catalina.c ...

  6. ionic BUILD FAILED

    BUILD FAILED Total time: 24.572 secs FAILURE: Build failed with an exception. What went wrong: Execu ...

  7. 什么是 Spring Boot

    Spring Boot 介绍 Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而 ...

  8. mysql分组用法

    --select num from 表 group by num --select num from 表 group by num,nid --特别的:group by 必须在where之后,orde ...

  9. iOS 线上版本图片资源格式的问题导致的闪退

    链接:https://www.jianshu.com/p/6492779cb89e來源:简书 导致这种问题的原因是:在 Xcode 8 中,当你资源文件中[含有16位图]或者[图片显示模式γ值为'P3 ...

  10. BitBlt 函数 详解, StretchBlt、SetStretchBltMode、SetBrushOrgEx 按句柄截图、直接截取缩略图

    BitBlt 该函数对指定的源设备环境区域中的像素进行位块(bit_block)转换,以传送到目标设备环境. 函数原型 [DllImport("gdi32.dll")] publi ...