首先,给个默认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. P99、面试题13:在o(1)时间删除链表结点

    题目:给定单向链表的头指针和一个结点指针,定义一个函数在o(1)时间删除该结点.链表结点与函数的定义如下:struct ListNode{       int m_nValue;       List ...

  2. win7打开或关闭windows功能 提示“出现错误,并非所有的功能被更改”,管理员权限惹的祸

    2013-07-25 18:12:06 最近要用到windows的telnet功能,本来是很简单的事情,因为管理员权限的问题,花了不少时间,才发现是管理员权限惹的祸,更滑稽的是,自己一直以来都不是管理 ...

  3. shorter concat [reverse longer]

    shorter concat [reverse longer] Description: Given 2 strings, a and b, return a string of the form:  ...

  4. Return Negative

    Return Negative In this simple assignment you are given a number and have to make it negative. But m ...

  5. Android开发之错误:elicpse运行时弹出Running Android Lint has encountered a problem failed, nullpointerexception

    昨天安装了下Android Studio,把SDK路径指向了ADT目录下的SDK目录.同时FQ出去更新了下SDK.然后今天运行eclipse的时候,弹出错误,同时在工程的名称处有错误提醒,但是代码中没 ...

  6. UVa 808 (建坐标系、找规律) Bee Breeding

    题意: 如图,按照图中的规律给这些格子编号.给出两个格子的编号,求从一个格子到另一个格子的最少步数.(一步只能穿过有有公共边的格子) 分析: 根据高中数学知识,选任意两个不共线的向量,就能表示平面上所 ...

  7. [swustoj 1095] 挖金子

    挖金子(1095) 题目描述 你在一个N*M的区域中,一开始在(1,1)的位置,每个位置有可能有金子,也有可能不能到达,也有可能有传送门.你只能往右或者下走,不能走出这个区域.当你位于传送门时,传送门 ...

  8. 在 Azure 中使用公用 IP 创建多 NIC VM

    Russ Slaten  2014年 11 月 18日下午 4点 我们最近宣布了支持具有多个网络接口控制器 (NIC) 的虚拟机 (VM).我仍在努力了解此功能适用的所有新场景,但首先,我希望亲自测试 ...

  9. CSS预处理器Sass(Scss)、Less、Stylus

    CSS 预处理编译器能让我成程序化其的方式编写CSS代码,可以引入CSS中没有的变量.条件.函数等特性,从而让代码更简单易维护,但一般按预处理器语法编写的代码无法直接在浏览器中运行,需用通过工具比如g ...

  10. POJ 2352 Stars

    题意:有一堆星星,每个星星的级别为坐标不高于它且不在它右边的星星个数,求级别为0-n - 1的星星个数. 解法:树状数组.输入的星星坐标已经按y坐标升序排序,y坐标相等的按x升序排序,所以每输入一个数 ...