首先，给个默认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. P51、面试题5：从尾到头打印链表

    题目:输入一个链表的头结点,从尾到头反过来打印出每个结点的值. 链表结点定义如下: Struct ListNode{ int   m_nKey; ListNode*   m_pNext; }; 我们可 ...

  2. mysql 闪回表工具

    use HTTP::Date qw(time2iso str2time time2iso time2isoz); use POSIX; my $SDATE = strftime("%Y-%m ...

  3. AOSP

    定义编辑 "Android Open-Source Project"的缩写 中文意为"Android 开放源代码项目" 内容编辑 在Android Open-S ...

  4. pylinter could not automatically determined the path to `lint.py`

    先关闭Sublime Text 1) 到官网先下载pylinter,http://www.logilab.org/project/pylint,然后解压缩,拷贝到C盘,目录为C:\pylint-1.0 ...

  5. struts2 package元素配置

    package 元素的所有属性及对应功能: Attribute Required Description name yes key to for other packages to reference ...

  6. BZOJ2870: 最长道路tree

    题解: 子树分治的做法可以戳这里:http://blog.csdn.net/iamzky/article/details/41120733 可是码量... 这里介绍另一种好写又快的方法. 我们还是一颗 ...

  7. OK335xS davinci mdio driver hacking

    /******************************************************************************* * OK335xS davinci m ...

  8. erlang判断语法结构：if/case/guard

    erlang 有好几种常用的判断结构语句,如 if.case.guard 等.文章将分别对 if / case /guard 的特点做介绍,以及用例说明 1.if 结构 if Condition 1  ...

  9. 嵌入式Linux USB WIFI驱动的移植

    硬件平台:飞思卡尔MX258开发板 操作系统:Linux2.6.31 WIFI:    RT2860 USB WIFI模组 交叉编译环境:gcc version 4.1.2 调试步骤: 第一步:测试U ...

  10. 【管理工具】Kerberos简单应用

    Kerberos这一名词来源于希腊神话“三个头的狗——地狱之门守护者”系统设计上采用客户端/服务器结构与DES加密技术,并且能够进行相互认证,即客户端和服务器端均可对对方进行身份认证.可以用于防止窃听 ...