<!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. VMware Workstation 14 pro License Keys

    AC5XK-0ZD4H-088HP-9NQZV-ZG2R4 CG54H-D8D0H-H8DHY-C6X7X-N2KG6 ZC3WK-AFXEK-488JP-A7MQX-XL8YF ZC5XK-A6E0 ...

  2. [译文]casperjs的API-mouse模块

    mouse类 这个类是对各种鼠标操作的抽象,比如移动,点击,双击,滚动等.它要求一个已经获得DOM属性的casper对象,能用这种方式创造一个鼠标对象: var casper = require(&q ...

  3. P3622 [APIO2007]动物园

    题目链接 题意分析 这是一道状压\(DP\)的题 一个人只可以欣赏到\(5\)只动物 显然可以状压 我们用\(dp[i][j]\)表示当前\([i,i+4]\)中这\(5\)只动物的状态\(j\) 在 ...

  4. 往word中插入美观的代码

    http://www.planetb.ca/syntax-highlight-word 选择需要的语言,然后Show Highlighted,复制跳转页面显示的代码至word即可

  5. python3随机生成中文字符

    运行环境在Python3.6下,Python2的解决方案网上有很多. ---2017.10.18 第一种方法:Unicode码 在unicode码中,汉字的范围是(0x4E00, 9FBF) impo ...

  6. Wrapper配置详解及高级应用（转）

    转自:http://286.iteye.com/blog/1921414 将一个简单的程度如HelloWorld 的应用包装秤Wrapper 服务并不复杂,甚至可以认为非常简单.但是实际项目应用过程中 ...

  7. sessionKey/tokenKey

    移动端维持登录状态的机制 1. sessionKey/tokenKey哪里来? 1. 登录成功之后,后台返回. 2. sessionKey/tokenKey生成有什么规则? 1. 后台返回的,按照一定 ...

  8. [问题解决]gradle编译失败系统找不到指定的文件

    [问题解决]gradle编译失败系统找不到指定的文件 问题描述 Error:C:\Users\diql.gradle\caches\2.14.1\scripts-remapped\settings_9 ...

  9. ECharts概念学习系列之ECharts官网教程之在 webpack 中使用 ECharts（图文详解）

    不多说,直接上干货! 官网 http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94% ...

  10. 数据库~Mysql里的Explain说明

    对于mysql的执行计划可以在select前添加Explain来实现,它可以告诉我们你的语句性能如何. 下面是对explain的具体说明,也都是官方的,以后进行参考. id SELECT识别符.这是S ...