1. /*滚动条样式*/
  2. .innerbox::-webkit-scrollbar {/*滚动条整体样式*/
  3. width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  4. height: 4px;
  5. }
  6. .innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  7. border-radius: 5px;
  8. -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  9. background: rgba(0,0,0,0.2);
  10. }
  11. .innerbox::-webkit-scrollbar-track {/*滚动条里面轨道*/
  12. -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  13. border-radius:;
  14. background: rgba(0,0,0,0.1);
  15. }
  1. <div class="inner">
  2. <div class="innerbox">
  3. <p style="height:200px;">这是内容111</p>
  4. <p style="height:400px;">这里是内容222</p>
  5. <p>这里是内容333</p>
  6. </div>
  7. </div>

css 改变浏览器滚动条的样式的更多相关文章

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

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

  2. 如何改变iframe滚动条的样式?

    如何改变iframe滚动条的样式? web前端开发 css javascript iframe html RayLiao 2014年11月19日提问 · 2014年11月20日更新 关注 关注 收藏 ...

  3. CSS改变浏览器默认滚动条样式

    前言 最近总是看到某网站滚动条不是浏览器默认样式,而是自定义样式   比如我博客的滚动条,自定义滚动条样式和hover前后的效果 顿时来了兴致和有一个疑问,这是怎么实现的呢? 解决   注:经测试,目 ...

  4. 自定义浏览器滚动条的样式,打造属于你的滚动条风格——兼容IE和webkit(ff不支持)

    前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,觉得 有必要折腾一下.于是在各大浏览器中对比了一下,发现只用Chr ...

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

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

  6. css修改overflow滚动条默认样式

    html代码 <div class="inner"> <div class="innerbox"> <p style=" ...

  7. [原创作品]html css改变浏览器选择文字的背景和颜色

    又很久没有'剥壳'了,最近在为一家公司做一个生产管理解决方案.所以都很忙.今天的话题很简单,就做一个很简单的网页特效.今天偶然浏览到一个网站,他们在选择文字时,样子不是蓝背景和白色字体那么单调,感觉这 ...

  8. CSS设置浏览器滚动条样式

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

  9. 用css改变默认的checkbox样式

    自己常用的改变checkbox样式的两个方法: 一.利用background用图片代替checkbox效果 缺点:你首先得有一张好看的图片 优点:浏览器兼容性好 <!doctype html&g ...

随机推荐

  1. vs 2013 编译cocos2d-x-3.9

    下载地址:链接: https://pan.baidu.com/s/1IkQsMU6NoERAAQLcCUMcXQ 提取码: p1pb 下载完成后,解压 进入build 目录 使用vs 2013 打开工 ...

  2. CentOS6.5下搭建SVN服务器

    1.检查是否已安装 rpm -qa | grep subversion 如果要卸载旧版本: yum remove subversion 2.安装 yum install subversion PS:y ...

  3. PostegreSQL模板数据库

    模板数据库 模板数据库就是创建新database时,PostgreSQL会基于模板数据库制作一份副本,其中会包含所有的数据库设置和数据文件. CREATE DATABASE 实际上是通过拷贝一个现有的 ...

  4. CxImage透明图片合成和文字叠加

    1         CxImage的作用 CxImage将几张图片合成一张图片,在一张底图上添加图片,有些图片是有透明效果的,实现图片之间的透明重叠效果.另外还可以添加文字. (1)背景图片mymix ...

  5. angular2 脏检查机制

    https://www.waitig.com/angular2-%E8%84%8F%E6%A3%80%E6%9F%A5%E8%BF%87%E7%A8%8B.html https://zhuanlan. ...

  6. 在Spring Boot中使用 @ConfigurationProperties 注解, @EnableConfigurationProperties

    但 Spring Boot 提供了另一种方式 ,能够根据类型校验和管理application中的bean. 这里会介绍如何使用@ConfigurationProperties.继续使用mail做例子. ...

  7. Android SDK无法更新的解决方法

    一.说明: Android 更新sdk时访问google很慢,有时连接不上,可利用国内的某些镜像网站实现Android SDK在线更新. 二.解决方法: 在SDK Manager -> tool ...

  8. vs2013安装及opencv3.0的配置

     vs2013的安装改善计划,不勾选. Windows8  和 windows phone不勾选  然后进行解压安装.(我安装在了e盘的次级目录) 安装完成,点击“启动” 登陆界面,点击“以后再说”. ...

  9. openstack中数据库连接数太多--pymysql.err.OperationalError,1040, u'Too many connections'

    1.出现问题: openstack运行过程中出现如下问题: OperationalError: (pymysql.err.OperationalError) (1040, u'Too many con ...

  10. 解决无法安装Microsoft .Net Framework 3.5

    如果解决不了,试试我的方法吧,我也在网上找了好久,最终在本地解决了 所需工具:dism,和Net Framework 3.5,已经打包 链接:https://pan.baidu.com/s/1nKok ...