html代码

<div class="inner">
<div class="innerbox">
<p style="height:200px;">这是内容111</p>
<p style="height:400px;">这里是内容222</p>
<p>这里是内容333</p>
</div>
</div>

css代码

      .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);
}

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

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

    之前因为公司项目需要,在网上找到的: 直接上代码了 html代码 <div class="inner"> <div class="innerbox&qu ...

  2. 修改element ui 默认样式最好的解释

    KedAyAyA 17年10月 https://forum.vuejs.org/t/elementui/19171/5 首先添加了scoped的style标签会在vue-loader里进行处理 所谓的 ...

  3. react中修改antd的默认样式

    最近在做react+antd项目.不可避免的遇到了修改antd默认样式的问题. 比如,table组件的表头背景色设置,如果直接使用元素样式,会修改整个项目的table.这里我用的方法是,给table添 ...

  4. 修改select的默认样式

    在我们用select的时候,通常因为他的默认样式比较丑而用自己样式,那首先要去掉他的默认样式 去掉select的边框和点击时的蓝色边框 select{border: none;outline: non ...

  5. css 改变浏览器滚动条的样式

    /*滚动条样式*/ .innerbox::-webkit-scrollbar {/*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px; } .i ...

  6. css3修改浏览器scroll默认样式

    最近公司的新项目.前端样式采用的蚂蚁金服的antDesign. 比较喜欢antDesign.BootStrap一类简约大方的前端样式库. 但是在页面布局上.包括一些选择框.默认的scroll样式简直丑 ...

  7. 修改easyui panel 默认样式

    有这么个需求需要修改easyui panel头部中的背景色.于是根据panel中的最终被浏览器解析出来的类名,直接修改这个css样式,设置backgroud-color这个属性,发现不管用. 于是,就 ...

  8. CSS公共清除浏览器默认样式

    /*Vue隐藏*/ [v-cloak] { display: none; } /*清除样式*/ body, ol, ul, dl, li, dt, dd, h1, h2, h3, h4, h5, h6 ...

  9. Bootstrap修改input file默认样式

    html部分 <div class="form-group"> <label class="col-sm-3 control-label"&g ...

随机推荐

  1. [springboot 开发单体web shop] 8. 商品详情&评价展示

    上文回顾 上节 我们实现了根据搜索关键词查询商品列表和根据商品分类查询,并且使用到了mybatis-pagehelper插件,讲解了如何使用插件来帮助我们快速实现分页数据查询.本文我们将继续开发商品详 ...

  2. 【故障公告】docker swarm 集群问题造成新版博客后台故障

    非常抱歉,今天下午 16:55~17:05 左右,由于 docker swarm 集群的突发不稳定问题造成新版博客后台(目前处于灰度发布阶段)无法正常使用,由此给您带来麻烦,请您谅解. 出故障期时,新 ...

  3. 剑指Offer-25.复杂链表的复制(C++/Java)

    题目: 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的节点引用,否则 ...

  4. 🙀Java 又双叒叕发布新版本,这么多版本如何灵活管理?

    文章来源:http://1t.click/bjAG 前言 不知不觉 JDK13 发布已有两个月,不知道各位有没有下载学习体验一番?每次下载安装之后,需要重新配置一下 Java 环境变量.等到运行平时的 ...

  5. ArcGIS 发布Feature服务

    运行环境: Win10 ArcGIS10.4 具体操作: 1.打开ArcMap,加载sde中导入的文件,也可以加载shp数据源指向sde中文件 2.保存成mxd,然后点share as-Service ...

  6. 究极秒杀Loadrunner乱码

    Loadrunner乱码一击必杀 之前有介绍一些简单的针对Loadrunner脚本或者调试输出内容中乱码的一些设置,但是并没能完全解决一些小伙伴的问题,因为那些设置实在能力有限,还是有很多做不到的事情 ...

  7. Java面向对象学习目录

    Java面向对象学习目录 以下为面向对象学习目录,有待补充的部分,我还会再后续的学习过程中加以补充与修改~ 一.面向对象编程思想 二.Java类及类中成员 属性 方法 构造器 代码块 内部类 面向对象 ...

  8. Java流程控制之(一)条件

    目录 条件语句 单if情况 单if/else情况 if/else多分支情况 switch条件语句 条件语句+循环语句,直接甩图甩代码! 条件语句 Java希望在某个条件为真时执行相应的语句. 单if情 ...

  9. 一个HTML5培训班毕业生的找工作随笔

    昨天刚参加完一个面试,通过了.写个随笔记录一下. 先介绍一下背景. 我是今年十月份的时候从某个培训机构的HTML5 Web前端培训班毕业的,是一个刚进入IT行业的新人. 本人毕业于某三流学校,在参加培 ...

  10. jquery怎么添加多个类名

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...