/*滚动条样式*/
.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. P2016 战略游戏

    传送门 思路: 前置知识——普通树D: ▲普通的树形 DP : 设 f [ i ][ 0 ] 表示这个点不取,则它的所有子节点都要取:f [ i ][ 1 ] 表示这个点取,则它的子节点取与不取对之前 ...

  2. synchronized中判断条件用while而不是if

    假设一个生产者生产一个产品,两个消费者A,B去取这个商品. 使用if: A去取商品,发现空,于是等待... B去取商品,发现空,于是等待... 生产者生产商品,唤醒他们 B先争到锁,从wait()后执 ...

  3. java类加载器和双亲委派模型

    一. 类加载器 ClassLoader即常说的类加载器,其功能是用于从Class文件加载所需的类,主要场景用于热部署.代码热替换等场景. 系统提供3种的类加载器:Bootstrap ClassLoad ...

  4. (转)Windows上搭建Kafka运行环境

    转自:<Windows上搭建Kafka运行环境> 完整解决方案请参考: Setting Up and Running Apache Kafka on Windows OS   在环境搭建过 ...

  5. 初探nginx负载均衡配置

    只简单说一下upstream的配置,如何进行负载均衡后续还需要多了解 1.另准备一个配置文件命名为nginx_test.conf 为了不污染原有的nginx.conf,提前复制一份配置文件做试验,然后 ...

  6. PHP数组排序函数有哪些

    PHP数组排序函数有哪些 一.总结 一句话总结:其实也就是是否保持索引,对键排序还是对值排序,除了sort,rsort.shuffle,usort外,都是保持索引的 是否保持索引 键排序 值排序 除了 ...

  7. 响应式布局与bootstrap框架

    原文 网页布局方式 1.固定宽度布局:为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页. 2.流式布局:为网页设置一个相对的宽度,通常以百分比做为长度单位. 3.栅格化布局:将网页宽 ...

  8. Getting Started with Processing 第五章的easing问题

    分析 使用 easing easing 的感官目的是为了 draw 的时候,画的图形不是即时 mouseX 的值,而是稍有落后一点.从算法分析,就是让所画图形的 x 坐标 落后于 mouseX 的值, ...

  9. 20165327 2017-2018-2 《Java程序设计》第9周学习总结

    20165327 2017-2018-2 <Java程序设计>第9周学习总结 教材内容总结 第十三章 (一)教材学习内容总结 理解 URL类是对统一资源定位符的抽象,使用URL创建对象的应 ...

  10. English trip EM2-LP-6B Teacher:Gabriele

    Gabriele    Gabi               n. 加布里尔,加布里埃尔,加布里埃,加布里埃莱(人名) 课上内容(Lesson) 词汇(Key Word ) is married? 结 ...