首先,给个默认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. /etc/bashrc,用户目录下.bashrc有什么区别?

    /etc/bashrc,用户目录下.bashrc有什么区别? 一个是针对整个系统所有用户的,一个是针对特定用户的./etc/bashrc修改了以后要重启系统才生效,而用户目录下.bashrc修改了以后 ...

  2. TOP命令详解

    TOP是一个动态显示过程,即可以通过用户按键来不断刷新当前状态.如果在前台执行该命令,它将独占前台,直到用户终止该程序为止.比较准确的说,top命令提供了实时的对系统处理器的状态监视.它将显示系统中C ...

  3. A9裸机

    Tiny4412裸机程序之操作ICache 一.首先普及一下什么是Cache 基于程序访问的局限性,在主存和CPU通用寄存器之前设置了一类高速的.容量较小的存储器,把正在执行的指令地址附件的一部分指令 ...

  4. sizeof(数组)

    这里就不讨论一般的数组长度计算了,只说明一下任何数据到了函数的形参中都将退化为指针,所以计算大小的时候,也是计算的指针的大小 直接上代码了 // class sizeof测试.cpp : 定义控制台应 ...

  5. bzoj1856

    这是一道无比涨姿势的题目 首先总结一下这种输入几个数的题目, 一般不是递推就是数学题 显然,这道题用递推是无法做到O(n)的复杂度的 那我们就考虑这是一道数学题了 我已开始纠结在正向思维了,正向求好像 ...

  6. Fiddler的基本介绍

    fiddler 简介: 一款免费且功能强大的数据包抓取软件.它通过代理的方式获取程序http通讯的数据,可以用其检测网页和服务器的交互情况,能够记录所有客户端和服务器间的http请求,支持监视.设置断 ...

  7. 多线程程序设计学习(9)worker pattern模式

    Worker pattern[工作模式]一:Worker pattern的参与者--->Client(委托人线程)--->Channel(通道,里边有,存放请求的队列)--->Req ...

  8. HDU 1078 FatMouse and Cheese 记忆化搜索DP

    直接爆搜肯定超时,除非你加了某种凡人不能想出来的剪枝...555 因为老鼠的路径上的点满足是递增的,所以满足一定的拓补关系,可以利用动态规划求解 但是复杂的拓补关系无法简单的用循环实现,所以直接采取记 ...

  9. 使用appium做安卓手机web自动化测试 真机demo

    一:appium相关环境搭建过程略. 二:连接真机: 1.手机(andriod 4.2.2)连接电脑,打开USB调试模式. 2.运行cmd 输入 adb devices -l 查看UDID,如图: 3 ...

  10. MSP430看门狗

    其实430的看门狗,与51的大同小异,都是为了防止程序跑飞而出现不可预知的错误而专门设定的,所以说,看门狗的应用,是项目马上要进行实际应用中必须要进行的一环,也是电子工程师必须掌握的一环,下面介绍一下 ...