优化浏览器默认scroll样式小技巧
一个最简单的页面：
<!DOCTYPE html>
<html>
<head>
<title>优化scroll</title>
<meta charset="utf-8">
<style type="text/css">
body{
width:2000px;
height: 2000px;
margin:0;
padding:0;
}
</style>
</head>
<body>
</body>
</html>
显示效果再熟悉不过了：
有点丑陋，可以通过css的方式，最快解决这个问题。（是的，不支持IE，及与其内核相关的浏览器）
处理代码如下，注释有说明：
<!DOCTYPE html>
<html>
<head>
<title>优化scroll</title>
<meta charset="utf-8">
<style type="text/css">
body{
width:2000px;
height: 2000px;
margin:0;
padding:0;
}
/*
width可以改变右边滚动条的宽度
height可以改变下边滚动条的高度
*/
::-webkit-scrollbar {
width: 9px;
height: 9px;
box-sizing: border-box;
}
/*
设置了滚动条按钮的样式图标，url我直接用了base64图片，无所谓啦
*/
::-webkit-scrollbar-button {
width: 9px;
height: 12px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAUCAYAAADRA14pAAADr0lEQVRYR71Yy04iQRQtE10IRiSBOLbOUvZmfkIlLHXjI+jCDzAm8w8TJKxZyENdqEui8BPuDVtsHCNGQcFEWUzdSt/KtbqqqZ44U0kn1V2n69xz63W6x5h9iXFoNADe521dftnibJlt+7PCjdmycpzz9vbmmvCTk5PzvK0NuNvbWyNuYWEBcbbUX8obSvBgMDAKiUQiUrDLi0nNPC9eYqwFfyWvTvAPHsm1JhqHEl9dXbHV1VUJo4Lv7u6k4JOTE7a5uSlxc3Nz/0ww5VXjR15VMIjFoop2+v2+EAJisaDoaDQqR/j+/l7gjo+PJW5ra0vUZ2dnqWDko1zqM+fi4kL0RxOMMaytrUneXC4ncMhFYzg4OBA4KpiK1Yl2Xl9fXSqWip6ampLEDw8PbrVa9U2S7e1tlkwmdYIBC6J1CXfOz8/ljAHRNIbFxcXs0tJShb/rHB4eShxw0RgymczPVCr1CwWrRCOJeQesVqtJUevr61JwPp+XxHt7e6xYLErc/v6+OqVHJvrl5cWt1+u+BEIMNzc3UvDj46NbqYD2zwViaLfbWsGBU+vs7EwIASIow+GQYSA8e5K4UCgIHBBBeX9/Z+VyWdT5CAliJabApdTr9UR/VDTGQPeO5+dngUMuGgPiQu3S3W7XHR8fl2IxaHjWbDalYAhwYmJCNH98fEht8KzVaukEA8a4WQIvdgKiacJjsZicWZgYwJZKJZlwiGF6etq3hpWk+24dzKAOODMzI4lhrZs6I2t9FB+2+3ghcZjIIF4YCJiFUJA31AjbCrY8N/9aMH2RCrbhDSP4OydKBETZ4W09fn3jV8SAG/Dnv/kFFtS22PC2eGdWOJNg3fnos3iXl5ci6HQ6zTxryVRbeXp6KjAbGxvMYCt1XDQZgpdy0UbV0lI+ikNuk9NCLN21fU4LQXA2ersgbP+fXBZiwG05jqNzWUE7NLwueHVmBxrpLg3c4OwoJ9aR+6udFgvhsugA/DeHZ3JaWi+tOi1q9bxdkHU6nU8uCxwPlkQiEeSjTaKFw8M+1JGmDg+4EUddFsSA3KFGWGcAVlZWBId3zrGnpyff4Z/NZgUmHo+bBIc2Hgqv+Cy14Q61hlUDgNkEcs8AMPXwR8zOzo48/Olc5vWRaxh4qctCsdCPajzAcFBOrI8yHtpdWj2HG42G6G95eZl55yHDLyokOjo6EtXd3V1Gvqh061e3jAAnjAfloi/Tcxi4KR/FIXeYc9jmFwpw2PwGUgY58NaG1/rX0h9d1DUzJEP0JgAAAABJRU5ErkJggg==);
background-color: transparent;
background-repeat: no-repeat;
}
/*
corner角落的意思，可以改变Y滚动条与X滚动条交叉的右下角的样式
*/
::-webkit-scrollbar-corner {
background-color: #f1f1f1;
-webkit-border-radius: 1px;
}
/*
这就是滚动条的样式了
*/
::-webkit-scrollbar-thumb {
background-color: #E7E7E7;
border: 1px solid rgba(0,0,0,0.21);
-webkit-border-radius: 5px;
}
/*
悬浮时
*/
::-webkit-scrollbar-thumb:hover {
background-color: #F6F6F6;
border: 1px solid rgba(0,0,0,0.21);
}
/*
滚动条空白处的样式
*/
::-webkit-scrollbar-track-piece {
background-color: rgba(0,0,0,0.15);
-webkit-border-radius: 5px;
}
</style>
</head>
<body>
</body>
</html>
显示效果如下：
（好吧，我觉得是好看了那么一点点）
优化浏览器默认scroll样式小技巧的更多相关文章
- css样式小技巧
1.css样式小技巧 HTML怎样设定使背景图片不随页面滚动而滚动 background-attachment:fixed; 2.实现li a 超过长度内容出现省略号… overflow:hidden ...
- JavaScript中if语句优化和部分语法糖小技巧推荐
前言 在前端日常开发过程中,if else判断语句使用的次数应该是比较频繁的了,一些较为复杂的场景,可能会用到很多判断,在某个代码块使用很多if else时,代码会显得较为冗余,阅读起来不够清晰. 除 ...
- 优化webpack构建时间的小技巧
在之前工作的地方,我们一直使用webpck去构建.但是,经过长达四年的更新迭代,每个人都在同一个项目中做了不同的操作和更新,这导致我们生产构建时间达到了惊人的一分半,watch模式的rebuild也达 ...
- CSS改变浏览器默认滚动条样式
前言 最近总是看到某网站滚动条不是浏览器默认样式,而是自定义样式 比如我博客的滚动条,自定义滚动条样式和hover前后的效果 顿时来了兴致和有一个疑问,这是怎么实现的呢? 解决 注:经测试,目 ...
- 优化C/C++代码的小技巧
说明: 无意看到一篇小短文,猜测作者应该是一个图形学领域的程序员或专家,介绍了在光线(射线)追踪程序中是如何优化C/C++代码的.倒也有一些参考意义,当然有的地方我并不赞同或者说我也不完全理解,原文在 ...
- 【CSS3】---样式小技巧
水平居中设置-定宽块状元素 当被设置元素为块状元素时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素.这一小节我们先来讲一讲定宽块状元素. 满足定宽 ...
- 优化C/C++代码的小技巧（转）
源:http://www.cnblogs.com/lizhenghn/p/3969531.html 说明: 无意看到一篇小短文,猜测作者应该是一个图形学领域的程序员或专家,介绍了在光线(射线)追踪程序 ...
- 修改chrome浏览器默认css样式的方法
最近重新用起了ubuntu kylin,然后又碰到之前让我感到有些难受的一个小问题:用chrome浏览部分网页时,一部分粗体字十分难看,就像是宋体直接加粗那样. 之前就觉得这样看起来很难受,但是找到的 ...
- 浏览器默认样式(user agent stylesheet)+cssreset
每种浏览器都有一套默认的样式表,即user agent stylesheet,在写网页时,没有指定的样式,按浏览器内置的样式表来渲染.这是合理的,像word中也有一些预留样式,可以让我们的排版更美观整 ...
随机推荐
- leetcode897
这道题用C++来写,在本地执行正常,但是使用OJ判断输出结果是空,暂时不清楚原因.代码如下: class Solution { public: vector<int> V; //中序遍历 ...
- ado connection string
Provider=SQLOLEDB.1;Password=123;Persist Security Info=True;User ID=sa;Initial Catalog=mydb;Data Sou ...
- Python 小练习一
1.如果同一个ip地址60s之内访问超过200次,那么就把ip加入黑名单 需求分析: 1.60s读一次文件 2.分割,取第一个元素,ip地址 3.把所有ip加入到一个list里面,如果ip次数超过20 ...
- c语言之字符串数组
一.字符串与字符串数组 1.字符数组的定义 char array[100]; 2.字符数组初始化 char array[100] = {'a','b','c'}; //array[0] = 'a' ...
- SSM框架整合（Spring+SrpingMVC+Mybatis） 简单案例
简介: SSM框架是Spring,SpringMVC 和Mybatis框架的整合,是标准的MVC模式,将整个系统划分为表现层,controller层,service层,dao层四层. Spring实现 ...
- JavaWeb之JSP入门
JSP原理及执行过程 流程图分析 用户发起请求,用户通过浏览器访问jsp页面,浏览器将HTTP协议的请求部分发送到服务端. 服务端获取请求部分,分析请求,发现本次的请求的的是jsp页面,jsp引擎按照 ...
- YII2 模型关联之 一对多
需求,一个用户有多篇文章全部查询出来 文章表 用户表 //首先查找出一个用户出来 $user=Users::find()->'])->one(); //第一个参数还是关联的模型,第二个依旧 ...
- 第十九课 pluginlib&Nodelet
把rgb摄像头的数据转换为laser的时候使用了Nodelet. pluginlib(插件库) 在ros中有一个plugin的包,下面是一个ROS Plugin Registration的例子 上面包 ...
- rest-framework之序列化组件
一:django自带序列化组件 Django内置的serializers(把对象序列化成json字符串) from django.core import serializers def test(re ...
- Python基础入门-实现猜数字小游戏
今天呢,我们来通过前面学过的一些知识点来完成一个猜数字大小的游戏程序设计.那么呢,一般人写代码直接上来就干,没有分析,这样的做法是没有产出的,除非你是大牛,今天呢,我会把我学习编程的思路分享给大家,我 ...