一个完整滚动条右以下部分组成:

  1. ::-webkit-scrollbar 滚动条整体部分,常用属性:width,height,background,border;
    ::-webkit-scrollbar-button 滚动条两边的按钮,默认不设置时不显示,可设置高度、背景色、背景图片;
    ::-webkit-scrollbar-track 整个滚动条去除两边按钮剩下的部分;
    ::-webkit-scrollbar-track-piece track去掉拖拽剩下的部分;
    ::-webkit-scrollbar-thumb 滚动条里面可以拖动的那部分;
    ::-webkit-scrollbar-corner 边角;
    ::-webkit-resizer 定义右下角拖动块的样式

    2.借用一张网上挺不错的图片说明:

    
    
    <style>
    /* 设置整个滚动条的一些属性,宽度针对垂直滚动条,高度针对水平滚动条 */
    ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    }
    /* 整个滚动条去除button剩下的部分 */
    ::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #d8dce5
    }
    /* 滚动条可拖拽的部分 */
    ::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #adadad;
    }
    ::-webkit-scrollbar-thumb:hover {
    background-color: #929292;
    }
    ::-webkit-scrollbar-thumb:active {
    background-color: #666363;
    }
    ::-webkit-scrollbar-corner {
    background-color: #535353
    }
    ::-webkit-scrollbar-resizer {
    background-color: #ff6e00
    }
    .sample {
    width: 600px;
    height: 400px;
    overflow: auto;
    }
    .sample-wrapper {
    width: 1200px;
    height: 1000px;
    background: -webkit-linear-gradient(red, blue);
    background: linear-gradient(red, blue);
    color: white;
    }
    </style>
    <div class="sample">
    <div class="sample-wrapper">
    <p>测试滚动示例1</p>
    <p>测试滚动示例2</p>
    <p>测试滚动示例3</p>
    <p>测试滚动示例4</p>
    <p>测试滚动示例5</p>
    <p>测试滚动示例6</p>
    <p>测试滚动示例7</p>
    <p>测试滚动示例8</p>
    </div>
    </div>

CSS3自定义浏览器滚动条样式的更多相关文章

  1. 自定义浏览器滚动条的样式,打造属于你的滚动条风格——兼容IE和webkit(ff不支持)

    前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,觉得 有必要折腾一下.于是在各大浏览器中对比了一下,发现只用Chr ...

  2. 关于Angular+ngx-perfect-scrollbar自定义各大浏览器滚动条样式的解决方法

    资料: http://manos.malihu.gr/jquery-custom-content-scroller/  (此项是结合Jquery使用的,在此并未采用) https://www.npmj ...

  3. JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome

    今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css ...

  4. jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法(转)

    系统默认的滚动条样式,真的已经看的够恶心了.试想一下,如果在一个很有特色和创意的网页中,出现了一根系统中默认的滚动条样式,会有多么的别扭. 为了自己定义网页中的滚动条的方法,我真的已经找了很久了,就目 ...

  5. [分享] 通过修改CSS自定义chrome滚动条样式

    首先得说一句 我不懂CSS的写法之类的 这段CSS也是在网上找的 所以有更先进的需求的话 我肯定不能满足你们了 不好意思效果图在10楼有人上了 我这边不管怎么弄 上传图片都卡在96% 而且不翻wall ...

  6. 自定义webkit浏览器滚动条样式

    ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background-color: trans ...

  7. 新发现。css3控制浏览器滚动条的样式

    &::-webkit-scrollbar-track { background-color: #7e7e7e; } &::-webkit-scrollbar { width: 14px ...

  8. bootshrap会改变IE浏览器滚动条样式

    在某个小网站的开发中 客户一直抱怨在IE11中网页右边滚动条不一样 后来发现在IE11中,有2个页面滚动条会自动隐藏,一开始以为是浏览器默认行为,改了overflow:scroll后也没有用.仔细观察 ...

  9. WPF 自定义ProgressBar滚动条样式

    一.前言 滚动条一般用于加载进度,我们在看视频的时候或者在浏览网页的时候经常能看到加载进度的页面.在程序开发中,默认的进度加载样式可能跟程序风格不太一样,或者加载进度的时候需要更改一下加载的样式.这个 ...

随机推荐

  1. J-Subarray_2019牛客暑期多校训练营(第二场)

    题意 有一个只由1,-1组成的数组,给出所有连续的1所在位置,求满足1的个数大于-1的个数的子区间的数量 题解 参考博客:https://www.cnblogs.com/Yinku/p/1122149 ...

  2. P2774 方格取数问题 网络最大流 割

    P2774 方格取数问题:https://www.luogu.org/problemnew/show/P2774 题意: 给定一个矩阵,取出不相邻的数字,使得数字的和最大. 思路: 可以把方格分成两个 ...

  3. HDU - 3416-Marriage Match IV (最大流 + 最短路)

    HDU - 3416:http://acm.hdu.edu.cn/showproblem.php?pid=3416 参考:https://www.cnblogs.com/kuangbin/archiv ...

  4. go Server示例

    示例1: package main import ( "fmt" "log" "net/http" "time" ) f ...

  5. kubernetes Value:将磁盘挂载到容器,PV,PVC

    6.1.介绍卷 6.1.1.卷的类型 emptyDir-用于存储临时数据的简单空目录 hostPath-用于将目录从工作节点的文件系统挂载到pod nfs-挂载到pod中的NFS共享卷. 还有其他的如 ...

  6. 【Spring】 IOC Base

    一.关于容器 1. ApplicationContext和BeanFactory 2. 配置文件 XML方式 Java-configuration 方式 @Configuration 3. 初始化容器 ...

  7. asp.net core 使用HttpClientFactory Polly实现熔断降级

    前言 在++NET Core2.1++后也是增加更新了很多东西,当然HttpClientFactory更新中的一部分.虽然说HttpClient这个实现了disposable,但使用它的时候用usin ...

  8. 初学FPGA-IP核错误

    [BD 5-336] This command cannot be run, as the BD-design is locked. Locked reason(s):* BD design cont ...

  9. ZK Watcher 的原理和实现

    什么是 ZK Watcher 基于 ZK 的应用程序的一个常见需求是需要知道 ZK 集合的状态.为了达到这个目的,一种方法是 ZK 客户端定时轮询 ZK 集合,检查系统状态是否发生了变化.然而,轮询并 ...

  10. MySQL二进制日志分析-代码实现(FORMAT_DESCRIPTION_EVENT)

    如前文概述,MySQL Binlog v3以前版本, 二进制日志文件的第一个事件是START_EVENT_V3, 从v4版本开始第一个事件为FORMAT_DESCRIPTION_EVENT(以下简称F ...