/*滚动条样式*/
.innerbox::-webkit-scrollbar {/*滚动条整体样式*/
width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
height: 4px;
}
.innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}
.innerbox::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius:;
background: rgba(0,0,0,0.1);
}
<div class="inner">
<div class="innerbox">
<p style="height:200px;">这是内容111</p>
<p style="height:400px;">这里是内容222</p>
<p>这里是内容333</p>
</div>
</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. Django安装与创建项目

    下载 https://media.djangoproject.com/releases/1.11/Django-1.11.20.tar.gz 解压 tar -zvxf Django-1.11.20.t ...

  2. java扫描文件夹下面的所有文件(递归与非递归实现)

    java中扫描指定文件夹下面的所有文件扫描一个文件夹下面的所有文件,因为文件夹的层数没有限制可能多达几十层几百层,通常会采用两种方式来遍历指定文件夹下面的所有文件.递归方式非递归方式(采用队列或者栈实 ...

  3. L1-048. 矩阵A乘以B

    水题不多说,直接上代码:#include<stdio.h> using namespace std; int main() { ][]; ][]; int m,n; int x,y; sc ...

  4. Eclipse启动Web项目 Tomcat中webapps中没有项目文件夹

    原文出处:https://blog.csdn.net/JYH1314/article/details/51656233 1.eclipse不像MyEclipse默认将项目部署到tomcat安装目录下的 ...

  5. Vuex结合 async/await 优雅的管理接口请求

    先看看 async/await 的语法 async 函数返回一个 Promise 对象 async 函数内部 return 返回的值.会成为 then 方法回调函数的参数. 1 2 3 4 async ...

  6. HTML 标记 3 —— 框架

    <frameset cols="80,*" frameborder="no" border="0" framespacing=&quo ...

  7. (转)c#中const与readonly区别

    const 的概念就是一个包含不能修改的值的变量.常数表达式是在编译时可被完全计算的表达式.因此不能从一个变量中提取的值来初始化常量.如果 const int a = b+1;b是一个变量,显然不能再 ...

  8. python 读写TXT,安装pandas模块。

    今天需要用python读TXT 文件,发现pandas库好用,所以就去下载,没想pythoncharm中的setting中下载失败,所以去下源文件,安装pandas 是提示得先装numpy库,于是又去 ...

  9. pandas更换index,column名称

    1)仅换掉index名称 df.index = list 2)调整index时,后面的项目也要跟着调整: df.reindex(list) 注意如果list中出现了df中没有的index,后面的项目会 ...

  10. Vue.js简单的状态管理和 Vuex的几个核心概念使用。

    由于状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长. 如果多层组件嵌套使用,传递prop,和事件emit.都很不方便. 不方便对数据的修改进行历史记录.影响后续的调试! 为了 ...