首先,给个默认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样式的更多相关文章

  1. 循序渐进BootstrapVue,开发公司门户网站(2)--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果

    在我们开发的页面中,让页面有一些动画效果,可以让页面更加有吸引力,只要不是处理太过,一般人还是希望有一些动态效果,如滚动动画加载,悬停处理变化等效果,本篇随笔介绍使用wow.js动画组件以及自定义的C ...

  2. Javascript和jquery事件--滚动条事件和自定义滚动条事件样式

    很想把滚动条事件跟鼠标滚轮事件放在一起,那就直接写在这一篇了.除了事件以外,对滚动条样式的调整也记在这里吧. 滚动条是浏览器的默认事件,使用overflow:auto/scroll都有可能出现,它的默 ...

  3. 网页滚动条CSS样式

    滚动条样式主要涉及到如下CSS属性: overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容 overflow: auto; 在需要时内容会自动添加滚动条overflow: ...

  4. Cnblogs自定义皮肤css样式-星空观测者

    不知不觉来Cnblogs也这么久了,然而Blogs提供的主题还是依旧那么复古,总觉得阅读起来难免枯燥,虽然我认为做技术不可以太过浮躁,但是一个美观的主题终究是吸引人眼的第一要素. 毕竟这么久了,在博客 ...

  5. 把cnblogs变成简书 - cnblogs博客自定义皮肤css样式

    吐槽 博客园cnblogs作为老牌的IT技术博客类网站,为广大的开发者提供了非常不错的学习交流平台. 虽然博客内容才是重点,但是如果有赏心悦目的页面不更好吗! cnblogs可以更换博客模板,并且提供 ...

  6. 如何自定义CSS滚动条的样式?

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表 本文会介绍CSS滚动条选择器,并在demo中展示如何在Webkit内核浏览器和IE浏览器中,自定义一个横向以及一个纵向的 ...

  7. jQuery自定义滚动条样式插件mCustomScrollbar

    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...

  8. FCKeditor自定义编辑区CSS样式

    在网站后台使用FCKeditor编辑器的时候,见到的效果可能并不完全是”所见即所得”的,因为如果在FCKeditor编辑区中使用了前台样式表中的样式,在编辑区中并不能把这些样式显示出来.解决这个问题的 ...

  9. 自定义滚动条 - mCustomScrollbar

    项目中需要使用自定义滚动条,但是试用了很多都功能不够全,今天发现一个比较全而且用法很简单的 -- mCustomScrollbar http://manos.malihu.gr/jquery-cust ...

随机推荐

  1. Git教程(9)集中式工作方式常用的设计分支的方案

    Git是一个复杂的版本管理系统,管理代码有很多工作方式,如集中式,管理者式,司令/副官式 本文是假设选用集中式工作方式时,设计分支的方案. 中小型项目: 维护两个长期分支,分别是master 和 de ...

  2. requirejs 小结

    1,“生搬硬套”-----js依赖的写法,依赖关系如这里的嵌套关系: /** * 模块化加载,注意各个js文件的依赖关系(嵌套) */ require(["jquery"], fu ...

  3. Samba 安全漏洞

    漏洞名称: Samba 安全漏洞 CNNVD编号: CNNVD-201403-239 发布时间: 2014-03-17 更新时间: 2014-03-17 危害等级: 中危   漏洞类型: 信任管理 威 ...

  4. 【转】如何在Ubuntu11.10(32位)下编译Android4.0源码(图文)

    原文网址:http://blog.csdn.net/flydream0/article/details/7046612 关于如何下载Android4.0的源码请参考我的另一篇文章: http://bl ...

  5. 设计模式Day02

    1.生成器模式 生成器模式也称为建造者模式.生成器模式的意图在于将一个复杂的构建与其表示相分离,使得同样的构建过程可以创建不同的表示. 生成器模式的编程步骤: (1)定义一个产品类:  由于不在该类完 ...

  6. 也用 Log4Net 之将日志记录到数据库的配置 (一)

    也用 Log4Net  之将日志记录到数据库的配置 (一) 前段时间我一直想做一个通用一点的日志记录系统,可以便于不同的业务组调用进行日志记录及分析.本来打算着自己下手写一个,后面发现各业务组可能会需 ...

  7. CSS中的块级元素与行级元素

    最近初学CSS时对块级元素与行级元素有时会产生混淆,写篇博客记录一下自己对其的理解. 先从概念上来看: 块级元素 特点:1.每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行 ...

  8. 在.net中用Connection对象数据源的架构信息

    可得到数据库中的,表,视图,等信息   string strcon = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source = " + fi ...

  9. .net之单元测试

    一.单元测试的目的是为了提高项目的质量 二..net单元测试的实施步骤是:在已经创建的类文件的某个方法上右键-->选择创建单元测试-->系统会创建单元测试解决方案--->单元测试解决 ...

  10. HDU-4696 Answers 纯YY

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4696 题意:给一个图,每个点的出度为1,每个点的权值为1或者2.给n个询问,问是否能找到一条路径的权值 ...