<!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. Android跳转淘宝、京东APP商品详情页

    import Android.content.Intent; import android.content.pm.PackageManager; import android.net.Uri; imp ...

  2. commonjs, nodejs, npm, browserify, watchify

    CommonJS CommonJS是一套规范,定义了javascript API.其中为了解决javascript模块化的问题,引入require和export NodeJS nodeJS是服务器端j ...

  3. ThreadLocal系列（二）-InheritableThreadLocal的使用及原理解析

    ThreadLocal系列之InheritableThreadLocal的使用及原理解析(源码基于java8) 上一篇:ThreadLocal系列(一)-ThreadLocal的使用及原理解析 下一篇 ...

  4. 问题 I: 闪闪发光

    [提交] [状态] [命题人:外部导入] 题目描述 一所位于云南昆明的中医药本科院校--云南中医学院. 因为报考某专业的人数骤减,正面临着停招的危机. 其中有九名少女想到一条妙计——成为偶像, 只要她 ...

  5. Mac 10.12安装Office 2011

    说明:由于WPS没有Mac版的,所以只能装这个,这个版本是2011的,基本够用了. 下载: (链接: https://pan.baidu.com/s/1pKGvXBP 密码: irw9)

  6. mono修改代码模板

    新建android application是在这里修改模板D:\prostu\Microsoft Visual Studio 10.0\Common7\IDE\ProjectTemplatesCach ...

  7. TryParse用法

    int.Parse()是一种类型转换:表示将数字内容的字符串转为int类型. 如果字符串为空,则抛出ArgumentNullException异常: 如果字符串内容不是数字,则抛出FormatExce ...

  8. WP调用api

    private string GetText() { string resultString = string.Empty; HttpWebRequest request = HttpWebReque ...

  9. Linux网络编程服务器模型选择之并发服务器（上）

    与循环服务器的串行处理不同,并发服务器对服务请求并发处理.循环服务器只能够一个一个的处理客户端的请求,显然效率很低.并发服务器通过建立多个子进程来实现对请求的并发处理.并发服务器的一个难点是如何确定子 ...

  10. hibernate基本配置show_sql、sql_format

    show_sql是否打印生成的sql语句: <property name="show_sql">false</property> sql_format,格式 ...