<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>scroll </title>
<style>
.inner{
width: 265px;
height: 400px;
position: absolute;
top: 33px;
left: 13px;
/*cursor: pointer;*/
overflow:hidden;
}
.innerbox{
overflow-x: hidden;
overflow-y: auto;
color: #000;
font-size: .7rem;
font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,"黑体",Arial,Tahoma;
height: 100%;
}
/*核心代码*/
.innerbox::-webkit-scrollbar {/*滚动条整体样式*/
width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
height: 4px;
}
.innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}
.innerbox::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(0,0,0,0.1);
}
/*核心代码*/
</style>
</head>

<body>
<div class="inner">
<div class="innerbox">
<p style="height:200px;">111</p>
<p style="height:400px;">222</p>
<p>333</p>
</div>
</div>
</body>
</html>

css实现修改默认滚动条样式的更多相关文章

  1. css 修改默认滚动条样式

    来自:https://www.cnblogs.com/juqian/p/6273808.html 侵删 <div class="inner"> <div clas ...

  2. CSS改变浏览器默认滚动条样式

    前言 最近总是看到某网站滚动条不是浏览器默认样式,而是自定义样式   比如我博客的滚动条,自定义滚动条样式和hover前后的效果 顿时来了兴致和有一个疑问,这是怎么实现的呢? 解决   注:经测试,目 ...

  3. 设置cnblogs默认滚动条样式

    默认滚动条样式丑嘛就不谈了~这里修改为个性化滚动条样式. CSS代码 /*滚动条整体样式*/ body::-webkit-scrollbar { width: 10px; height: 1px; } ...

  4. SharePoint 2010 修改默认列表样式

    SharePoint 2010  修改默认列表样式 :可以通过修改 下面两个全局配置进行修改.(未完..更新中...)  C:\Program Files\Common Files\Microsoft ...

  5. css控制默认滚动条样式

    针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下: 滚动条组成部分 1. ::-webkit-scrollbar 滚动条整体部分 2. ::-webkit-scrollbar-t ...

  6. 自设chrome默认滚动条样式

    今天无聊,想着chrome这种全面使用html的浏览器,可不可以让我自行改变它的默认CSS呢,结果去查查,有,很好 win7/8目录为 C:\Users\[你的用户名]\AppData\Local\G ...

  7. CSS3或CSS+JS实现改变滚动条样式(兼容所有浏览器)

    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 16px; /*滚动条宽度*/ height: 16px; /*滚动条高度*/ } ...

  8. css改变谷歌浏览器的滚动条样式

    详细内容请点击 /*---滚动条默认显示样式--*/ ::-webkit-scrollbar-thumb{        height:50px;    outline-offset:-2px;   ...

  9. eclipse 更改默认主题，重写默认滚动条样式（安装DevStyle主题插件）

    1.点击Help->Eclipse Marktplace 2.弹出窗口输入: DevStyle 3.点击安装,重启eclipse 4.可以设置黑色和浅色主题,个人比较喜欢浅色,重点式滚动条样式变 ...

随机推荐

  1. 为服务器设置固定IP地址

    为服务器设置固定IP地址 1.获取超级管理员权限 命令:$ su - 输入root密码 2.判断哪个网卡有流量,或者确定需要设置哪个网卡的固定ip 命令:# ifconfig PS:可以查询哪些网卡有 ...

  2. 高性能缓存服务器Varnish

    一.Varnish概述 Varnish是一款高性能的.开源的反向代理服务器和缓存服务器,计算机系统的除了有内存外,还有CPU的L1.L2,甚至L3级别的缓存,Varnish的设计架构就是利用操作系统的 ...

  3. kafka补充

     

  4. jquery text html width heigth的用法

    <body> <div id="div1"> <h3>我是标题</h3> </div> <div id=" ...

  5. Linux文件索引节点相关概念

    一.  概念 1.  inode(index node)表中包含文件系统所有文件列表 一个节点 (索引节点)是在一个表项,包含有关文件的信息( 元数据 ),包括: 文件类型,权限,UID,GID 链接 ...

  6. C++默认实参

    某些函数有这样一种形参,在函数的很多次调用中它们都被赋予一个相同的值,此时,我们把这个反复出现的值称为函数的默认实参.调用含有默认实参的函数时,可以包含该实参,也可以省略该实参. 例如定义一个函数sc ...

  7. mfix输出自定义数据

    有时候需要输出一些自定义的网格或者DEM颗粒信息,比如输出颗粒的受力,这里举例颗粒自定义数据的输出.网格自定义输出方法类似. 首先用FileLocatorPro(网上很多绿色版),搜索一下代码里mod ...

  8. 洛谷 P2473 [SCOI2008]奖励关(状压dp+期望)

    题面 luogu 题解 \(n \leq 15\) 状压 \(f[i][S]\)表示第\(i\)轮,吃过的集合为\(S\) 正着转移好像有点复杂 考虑逆推转移(正着转移应该也行) \(f[i][S]\ ...

  9. Eigenface与PCA人脸识别算法实验

    简单的特征脸识别实验 实现特征脸的过程其实就是主成分分析(Principal Component Analysis,PCA)的一个过程.关于PCA的原理问题,它是一种数学降维的方法.是为了简化问题.在 ...

  10. .NET熔断之Polly

    1. Net Core 中有一个被.Net 基金会认可的库 Polly,可以用来简化熔断降级的处理.主要功能:重试(Retry):断路器(Circuit-breaker):超时检测(Timeout): ...