有时候,对页面要求美观,但是默认滚动条太丑了,要修改一下。
在Chrome中,应该是这样,在style中加入一些代码即可,你也可以修改Chrome的custom.css文件,从而使所有页面的滚动条都有修改。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Chrome scroll</title>
<style type="text/css" media="screen">
::-webkit-scrollbar-track-piece{
background-color:#fff;
-webkit-border-radius:3;
}
::-webkit-scrollbar{
width:15px;
height:8px;
}
::-webkit-scrollbar-thumb{
height:30px;
background-color:#999;
-webkit-border-radius:7px;
outline:2px solid #fff;
outline-offset:-2px;
border: 2px solid #fff;
}
::-webkit-scrollbar-thumb:hover{
height:30px;
background-color:#9f9f9f;
-webkit-border-radius:8px;
}
ul {margin:0px; padding:0px; width:100px; height:200px; overflow-x:hidden; overflow-y:auto;}
</style>
</head>
<body>
<ul>
<li>aaaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbbbb</li>
<li>cccccccccccccc</li>
<li>dddddddddddddd</li>
<li>eeeeeeeeeeeeee</li>
<li>ffffffffffffff</li>
<li>aaaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbbbb</li>
<li>cccccccccccccc</li>
<li>dddddddddddddd</li>
<li>eeeeeeeeeeeeee</li>
<li>bbbbbbbbbbbbbb</li>
<li>cccccccccccccc</li>
<li>dddddddddddddd</li>
<li>eeeeeeeeeeeeee</li>
</body>
</html>
分享到:
相关推荐
Chrome 滚动条美化 原创 淡雅风格, 不仔细看看不出来, 而且类似透明效果 将文件复制到 win7系统: C:\Users\用户名\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets windows xp类似: 到 C:\*******...
由扁平还原到立体的扩展,crx格式,适合Chrome和360极速浏览器等Chromium内核的浏览器。使用方法:拖动到Chrome的扩展管理页面中。
perfect scrollbar 轻量级的滚动条。外观与mac上chrome的滚动条一样
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome.docx
关于自定义浏览器滚动条的样式这一块,如果网站可以不考虑非WebKit内核浏览器的话,倒是可以试试只用CSS去实现
重叠式滚动条::artist_palette:重叠式滚动条可自定义主题,适用于基于Firefox和Chrome的浏览器
浏览各大云平台,发现一个页面特效使用较为频繁,以“百度云”为例(https://cloud.baidu.com/),进入百度云后,当滚动条滚动至“更可靠的数据支持”模块时,页面数据将会开始滚动式增长特效。下面将会介绍我的解决...
Google Chrome浏览器扩展程序,可以滚动页面,就像滚动条位于指针正下方一样。 只需按配置的鼠标按钮并移动鼠标即可。 如果要滚动样式,只需在选项中进行设置即可。 该扩展基于并受Firefox的Scrollbar Anywhere的...
优化深色模式,覆盖设置、书签、历史、新标签页等更多内部页面的滚动条 ● 停止对 FTP 的支持 无法使用 Chrome 作为 FTP 客户端,不再支持 ftp:// 开头的地址。谷歌表示,这是一个未加密的传统协议,很少有人使用。 ...
一套超炫的3D滚动条拉动特效,本代码来自国外网站,请在Chrome、火狐浏览器等下测试,打开网页后,向下拉动滚动条,会看到翻转,旋转,波浪……总共12款炫酷html5特效
刚刚从zzllrr Imager中提取的一个简单的Chrome滚动条。 *绿色可爱! *纯CSS3,没有JS(JavaScript)! *在网页,iframe,textarea等上运行良好。如果需要其他滚动条样式,请不要离开。 以下是CSS Hack / MOD / DIY...
特征 更改轨道宽度。 更改轨道颜色。 更改拇指颜色。 更改悬停颜色。 图片 弹出菜单。 滚动条示例。
4:优化设置,更符合广大用户的使用习惯,加入鼠标手势,后台打开标签,超级托拽,平滑滚动,大小缩放,RSS订阅功能,网页截图等实用功能。 5:完美兼容支付宝,不用再安装支付宝插件,并加入对阿里旺旺。 6:加入对...
Chrome具有GPU硬件加速:当激活GPU硬件加速时,使用“Google Chrome”浏览那些含有大量图片之网站时可以更快渲染完成并使页面滚动时不会出现图像破裂的问题。 2013年4月份,Google宣布称将为Chrome浏览器开发新的...
Linux滚动速度修复下载:描述当扩展程序检测到Linux时,通过仿真Windows滚动速度来修复Chrome for Linux中的慢滚动速度。 当它检测到Windows时,它将自行禁用。 该扩展还允许在Windows和Linux中自定义滚动速度值。 ...
本文主要分享了使用原生JavaScript实现自定义浏览器滚动条兼容IE、 火狐和chrome的思路与方法,具有一定的参考价值,下面跟着小编一起来看下吧
深黑色滚动条更改滚动条的外观,使其与来自actualmanx的我的Chrome主题Deep Dark相匹配。 Deep dark滚动条可更改滚动条的外观以匹配我的chrome主题Deep Dark。 前往...
使Chrome / Chromium滚动条与Lubuntu相匹配。 这是Lubuntu的官方扩展程序,可让您的Google Chrome或Chromium Web浏览器使用与最新版本的Lubuntu匹配的滚动条。 此扩展不需要任何特殊权限即可运行,并使用纯CSS设置...
scroll-style[Chrome Extensions] Like android's scroll bars .像android的滚动条
Chromium 滚动条的现代外观 到 Chromium 的现代滚动条 下载 微软商店 Chrome 网上应用店 旧滚动条 新滚动条