自定义滚动条CSS样式
首先,给个默认css,清除掉以前的样式,给默认背景
.scrollbar {
margin-left: 30px;
float: left;
height: 300px;
width: 65px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
然后给自定义宽度和颜色
.scrollbar::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
.scrollbar::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #D62929;
}
预览图就是这个效果
自定义滚动条CSS样式的更多相关文章
- 循序渐进BootstrapVue,开发公司门户网站(2)--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果
在我们开发的页面中,让页面有一些动画效果,可以让页面更加有吸引力,只要不是处理太过,一般人还是希望有一些动态效果,如滚动动画加载,悬停处理变化等效果,本篇随笔介绍使用wow.js动画组件以及自定义的C ...
- Javascript和jquery事件--滚动条事件和自定义滚动条事件样式
很想把滚动条事件跟鼠标滚轮事件放在一起,那就直接写在这一篇了.除了事件以外,对滚动条样式的调整也记在这里吧. 滚动条是浏览器的默认事件,使用overflow:auto/scroll都有可能出现,它的默 ...
- 网页滚动条CSS样式
滚动条样式主要涉及到如下CSS属性: overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容 overflow: auto; 在需要时内容会自动添加滚动条overflow: ...
- Cnblogs自定义皮肤css样式-星空观测者
不知不觉来Cnblogs也这么久了,然而Blogs提供的主题还是依旧那么复古,总觉得阅读起来难免枯燥,虽然我认为做技术不可以太过浮躁,但是一个美观的主题终究是吸引人眼的第一要素. 毕竟这么久了,在博客 ...
- 把cnblogs变成简书 - cnblogs博客自定义皮肤css样式
吐槽 博客园cnblogs作为老牌的IT技术博客类网站,为广大的开发者提供了非常不错的学习交流平台. 虽然博客内容才是重点,但是如果有赏心悦目的页面不更好吗! cnblogs可以更换博客模板,并且提供 ...
- 如何自定义CSS滚动条的样式?
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表 本文会介绍CSS滚动条选择器,并在demo中展示如何在Webkit内核浏览器和IE浏览器中,自定义一个横向以及一个纵向的 ...
- jQuery自定义滚动条样式插件mCustomScrollbar
如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...
- FCKeditor自定义编辑区CSS样式
在网站后台使用FCKeditor编辑器的时候,见到的效果可能并不完全是”所见即所得”的,因为如果在FCKeditor编辑区中使用了前台样式表中的样式,在编辑区中并不能把这些样式显示出来.解决这个问题的 ...
- 自定义滚动条 - mCustomScrollbar
项目中需要使用自定义滚动条,但是试用了很多都功能不够全,今天发现一个比较全而且用法很简单的 -- mCustomScrollbar http://manos.malihu.gr/jquery-cust ...
随机推荐
- UML各种图画法总结
<UML 2.4.1 教程> http://www.sparxsystems.cn/resources/uml2_tutorial/ <UML总结(对九种图的认识和如何使用Ratio ...
- Android开发之实用小知识点汇总-1
1.去掉android屏幕中的actionbar: this.requestWindowFeature(Window.FEATURE_NO_TITLE);// 去掉标题栏 //这个是全屏幕显示的代码 ...
- HTML5学习(七)----地理定位
参考教程:http://www.w3school.com.cn/html5/html_5_geolocation.asp 说明:设备必须有GPS定位功能才能定位的 定位用户的位置 HTML5 Geol ...
- 初探数位dp
数位dp有着很明显的特点,一般来说是给定区间[l,r]求满足某种条件区间中的数有多少个 朴素解法一般是O(n)的而n往往很大(10^8起步) 这时候我们就要想办法优化,于是就有了数位dp 数位有两个基 ...
- MySql命令的基本操作
MySQL的基本命令: 登录:mysql -h -u root -p password:*****; 例如:mysql -h127.0.0.1 -uroot -p 增加一个用户: grant all ...
- Web打印控件smsx.cab使用说明
在项目开发中,经常会用到页面打印的功能,在ASP.NET环境下推荐一款web打印控件smsx.cab. 使用方法:一般会先定义一个用于打印的母版页(Print.Master),在母版页上做好布局 ...
- 几款JS地图插件比较
因工作需要,最近研究几款关于地图的JS插件,现与大家分享一下. 以下比较只是浅层次的分析一下,并没有实际通过项目检验,所以不足之处还请大家指出. 地图插件对比 插件名 简介 区域支持 扩展性 离线支 ...
- apache开源项目--solr
solr 名称来源 Search On Lucene Replication solr 基本概况 Apache Solr (读音: SOLer) 是一个开源的搜索服务器.Solr 使用 Java 语言 ...
- 服务器上的iptables
服务器上的iptables 防火墙设置脚本规则 完整脚本如下: 复制代码代码示例: #!/bin/bash# by www.jbxue.comiptab="/sbin/iptables&qu ...
- 【转】IOS的处理touch事件处理(依照手指的移动移动一个圆,开发环境用的ios7,storyboard)-- 不错
原文网址:http://blog.csdn.net/baidu_nod/article/details/32934565 先看下页面的效果图: 首先定义这个ball它有两个属性和两个方法: @prop ...