CSS自定义滚动条样式案例详解

CSS3自定义滚动条样式 -webkit-scrollbar

当内容超出容器时，容器会出现滚动条，其自带的滚动条有时无法满足我们审美要求，那么我们可以通过css伪类来实现对滚动条的自定义。

首先我们要了解滚动条。滚动条从外观来看是由两部分组成：1，可以滑动的部分，我们叫它滑块2，滚动条的轨道，即滑块的轨道，一般来说滑块的颜色比轨道的颜色深。

滚动条的css样式主要有三部分组成：

  1. ::-webkit-scrollbar   定义了滚动条整体的样式；
  2. ::-webkit-scrollbar-thumb  滑块部分；
  3. ::-webkit-scrollbar-thumb  轨道部分；

下面以overflow-y:auto;为例（overflow-x:auto同）

html代码：

<div class="test test-1">
    <div class="scrollbar"></div>
</div>

css代码：

.test{
    width: 50px;
    height: 200px;
    overflow: auto;
    float: left;
    margin: 5px;
    border: none;
}
.scrollbar{
    width: 30px;
    height: 300px;
    margin: 0 auto;

}
.test-1::-webkit-scrollbar {/*滚动条整体样式*/
        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
.test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
         -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #535353;
    }
.test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 10px;
        background: #EDEDED;
    }

效果如下如：

如果要改变滚动条的宽度：在::-webkit-scrollbar中改变即可；如果要改变滚动条滑块的圆角，在::-webkit-scrollbar-thumb 中改变；如果要改轨道的圆角在::-webkit-scrollbar-track中改变；

此外，滚动条的滑块不仅可以填充颜色还可以填充图片如下：

css代码：

.test-5::-webkit-scrollbar {/*滚动条整体样式*/
    width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.test-5::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
background-color: #F90;
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    }
.test-5::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        /*border-radius: 10px;*/
        background: #EDEDED;
    }

html代码：

<div class="test test-5">
    <div class="scrollbar"></div>
</div>

效果如下：

以上就可以做出自己喜欢的滚动条了；

如果文档中会有多个滚动条出现，而且希望所有的滚动条样式是一样的，那么伪元素前面不需要加上class、id、标签名等之类的任何东西。

到此这篇关于CSS自定义滚动条样式案例详解的文章就介绍到这了,更多相关CSS自定义滚动条样式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • flex中使用css样式修改TextArea滚动条的皮肤代码

    复制代码 代码如下: <mx:script> <![CDATA[ ........ var contentTextArea = new TextArea(); contentTextArea.setStyle("verticalScrollBarStyleName","mytextAreaStyle"); ........ ]]> </mx:Script> <mx:Style> .mytextAreaStyle{ /*

  • 用div+css解决出现水平滚动条问题

    十分郁闷的问题,看下我原来写的代码: 无标题文档 body{width:990px;} #head{height:95px;width:990px;} [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 居然出现了水平滚动条,问题是我定义的宽度才950px啊!最后还是在网友的帮助下,发现了原因: 1 可以直接把body的css改为: body{width:990px; margin:0; padding:0;} 2 可以添加: * {margin:0;padding:0;}添加后运行效果

  • css层滚动条

    层滚动条DIY - Powered by yexj00 =$("scroll_area").offsetHeight){ $("scroll_bar").style.display='none'; } } //--> =(scrollarea_H-scrollbar_H)){ $("scroll_bar").style.pixelTop=scrollarea_H-scrollbar_H; } return false; } } docume

  • jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果

    jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果

    很有意思.小邪就跟着做了一个Demo,木有用插件,只挂了jQuery. Demo 演示页面 一. CSS+jQuery实现随滚动条增减汽水瓶中的液体: 话说喝汽水的那个网站是用一个瓶子的图片,分为瓶口.瓶身.吸管还有瓶底.在这些图片中瓶子内部都是透明的,所以我们可以在底下一层按 x 轴平铺液体的图片,当然记得弄好吸管,吸管则是按照 y 轴平铺.其他具体的请看代码中注释. 啊,对了,那家公司的地址在这里 - http://janploch.de/ 复制代码 代码如下: body {backgrou

  • js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)

    js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 复制代码 代码如下: <!doctype html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{}{margin:0;padding:0;} html{}{_background:url(about:blank);} /**//*

  • JavaScript CSS 通用循环滚动条

    滚动板 /* 初始化 */ body { font: 12px/1 "宋体", SimSun, serif; background:#fff; color:#000; } /*核心是 position:relative;,才能让其内部的 ul 以绝对定位,通过改变 top 值实现向上移位置.*/ .scrollUl { overflow:hidden; position:relative; } /*演示多个滚动板同时使用,这里是统一按每行按 20px 高,第一个每屏 4 行,第 2 个

  • 用CSS代码轻松Diy你的网页滚动条

    在浏览网页的时候我们有时可以看到有的网页滚动条颜色不是系统默认的,而是漂亮的红色或其它颜色,其实这就是在网页代码之间加入代码来实现的,具体是哪些代码呢?      网页滚动条代码及其解释如下:(复制时请将大写尖括号改为小写) 以下是引用片段:<Style type="text/css"><!--   Body {  scrollbar-face-color:#C0C0C0; (表面)  scrollbar-highlight-color:#FFFFFF;(亮边)  s

  • CSS自定义滚动条样式案例详解

    CSS自定义滚动条样式案例详解

    CSS3自定义滚动条样式 -webkit-scrollbar 当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自定义. 首先我们要了解滚动条.滚动条从外观来看是由两部分组成:1,可以滑动的部分,我们叫它滑块2,滚动条的轨道,即滑块的轨道,一般来说滑块的颜色比轨道的颜色深. 滚动条的css样式主要有三部分组成: ::-webkit-scrollbar   定义了滚动条整体的样式: ::-webkit-scrollbar-thum

  • CSS hack用法案例详解

    CSS hack用法案例详解

    之前一直很狭隘的对CSS hack持有偏见,觉得写得规范的代码不应该使用这些"邪门歪道",可最近产品发布一个小问题却让我头疼了很久,最后查了一下资料,竟然使用CSS hack轻松解决了,不得不服啊,对付神奇的IE就得使用这些利器. 什么是CSS hack 由于不同的浏览器,甚至同一浏览器的不同版本对CSS的解析认识不一样,导致生成的页面效果不一致,写出针对不同浏览器CSS code就称为CSS hack. 常用的CSS hack 有三种方式,CSS 内部hack.选择器hack.HTM

  • CSS linear-gradient属性案例详解

    CSS linear-gradient属性案例详解

    目录 一.介绍 二.使用技巧 2.1 方格背景 2.2 棋盘效果 linear-gradient是css3的一个属性,功能强大,但是因为使用的灵活性,让没接触过的人感觉不好下手,下面来一起学习一下: 一.介绍 linear-gradient 是一种实现线性渐变的属性,顾名思义,它的特点的是控制渐变,特点是线性的进行控制. 属性介绍: linear-gradient([ [ [ | to [top | bottom] || [left | right] ],]? [, ]+); 可以简化为: 1.

  • 推荐一个好看Table表格的css样式代码详解

    推荐一个好看Table表格的css样式代码详解

    漂亮的table表格样式css源码漂亮的table表格样式 源码 <head> <title></title> <style type="text/css"> table { border-collapse: collapse; margin: 0 auto; text-align: center; } table td, table th { border: 1px solid #cad9ea; color: #666; height:

  • Android 通过自定义view实现水波纹效果案例详解

    Android 通过自定义view实现水波纹效果案例详解

    在实际的开发中,很多时候还会遇到相对比较复杂的需求,比如产品妹纸或UI妹纸在哪看了个让人兴奋的效果,兴致高昂的来找你,看了之后目的很明确,当然就是希望你能给她: 在这样的关键时候,身子板就一定得硬了,可千万别说不行,爷们儿怎么能说不行呢: 好了,为了让大家都能给妹纸们想要的,后面会逐渐分享一些比较比较不错的效果,目的只有一个,通过自定义view实现我们所能实现的动效: 今天主要分享水波纹效果: 标准正余弦水波纹: 非标准圆形液柱水波纹: 虽说都是水波纹,但两者在实现上差异是比较大的,一个通过正余

  • SpringBoot之自定义Filter获取请求参数与响应结果案例详解

    一个系统上线,肯定会或多或少的存在异常情况.为了更快更好的排雷,记录请求参数和响应结果是非常必要的.所以,Nginx 和 Tomcat 之类的 web 服务器,都提供了访问日志,可以帮助我们记录一些请求信息. 本文是在我们的应用中,定义一个Filter来实现记录请求参数和响应结果的功能. 有一定经验的都知道,如果我们在Filter中读取了HttpServletRequest或者HttpServletResponse的流,就没有办法再次读取了,这样就会造成请求异常.所以,我们需要借助 Spring

  • Android AS创建自定义布局案例详解

    Android AS创建自定义布局案例详解

    先创建一个title.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" andr

  • C/C++ Qt 自定义Dialog对话框组件应用案例详解

    C/C++ Qt 自定义Dialog对话框组件应用案例详解

    在上一篇文章 <C/C++ Qt 标准Dialog对话框组件应用> 中我给大家演示了如何使用Qt中内置的标准对话框组件实现基本的数据输入功能. 但有时候我们需要一次性修改多个数据,使用默认的模态对话框似乎不太够用,此时我们需要自己创建一个自定义对话框,这类对话框也是一种窗体,所以可以在其上面放置任何的通用组件,以实现更多复杂的开发需求. 目前自定义对话框与主窗体的通信有两种方式,一种是通过函数实现通信,另一种则是通过信号实现通信,我们以通过函数通信为基础,解释一下如何实现跨窗体通信. 首先需要

  • sass 常用备忘案例详解

    一.变量 所有变量以$开头 $font_size: 12px; .container{ font-size: $font_size; } 如果变量嵌套在字符串中,需要写在#{}中 $side : left; .rounded { border-#{$side}: 1px solid #000; } 二.嵌套 层级嵌套 .container{ display: none; .header{ width: 100%; } } 属性嵌套,注意,border后需要加上冒号: .container { b

  • vue.js+boostrap项目实践(案例详解)

    vue.js+boostrap项目实践(案例详解)

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3

随机推荐