使用伪类自定义scroll样式

效果：

代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum=1.0,user-scalable=no">

    <title></title>

    <style type="text/css">

        .inner {

            width: 265px;

            height: 400px;

            position: absolute;

            top: 33px;

            left: 50%;

            transform: translateX(-50%);

            overflow: hidden;

            border: 1px solid #ddd;

            padding-left: 10px;

        }

        .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: 8px;

            height: 8px;

            background-color: #F5F5F5;

        }

        /*定义滚动条轨道 内阴影+圆角*/

        .innerbox::-webkit-scrollbar-track {

            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);

            border-radius: 10px;

            background-color: #9F88FF;

        }

        /*定义滑块 内阴影+圆角*/

        .innerbox::-webkit-scrollbar-thumb {

            border-radius: 10px;

            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);

            background-color: #CC00FF;

        }

    </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>

　　

自定义scoll样式的更多相关文章

  1. Siteserver-stl:searchOutput(搜索结果)自定义显示样式

    stl:searchOutput 自定义显示样式 自定义搜索提交表单需要在<stl:searchOutput>中嵌入显示搜索结果的标签,必须包含的标签 有<stl:pageConte ...

  2. jQuery自定义滚动条样式插件mCustomScrollbar

    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...

  3. 自定义plain 样式的 tableview,模拟器上不显示分割线,真机上却显示分割线.

    一, 经历 1> 自定义plain 样式的 tableview,模拟器上不显示分割线,真机上却显示cell 下面的分割线. 2> 尝试使用表格的separatorStyle属性,尝试失败. ...

  4. Winform自定义窗体样式，实现标题栏可灵活自定义

    最近在编写C/S结构应用程序时,感觉窗体的标题栏样式太死板了,标题文字不能更改大小.颜色.字体等,按钮不能隐藏等问题,在网上也查找了许多相关的资料,没有找到合适的解决方案,发现许多人也在寻求这个问题, ...

  5. WPF 自定义滚动条样式

    先看一下效果: 先分析一下滚动条有哪儿几部分组成: 滚动条总共有五部分组成: 两端的箭头按钮,实际类型为RepeatButton Thumb 两端的空白,实际也是RepeatButton 最后就是Th ...

  6. Android设置选项开发及自定义Preference样式

    一个完整的Android应用程序都应该提供选项(或者叫偏好设置等等)让用户对APP的表现形式能够进行设置,比如说是否加入用户体验计划,或者是否自动升级.定时提醒.开启自启动.后台运行等等.提供一个好的 ...

  7. Android: 自定义Tab样式,一种简单的方式。

    之前看到过论坛里已经有人发过自定义Tab样式的帖子,感觉有些复杂了,这里分享个简单的方法. 1.制作4个9patch的tab样式,可参考android默认的资源 tab_unselected.9.pn ...

  8. 如何使用XE2及更高版本中提供的自定义皮肤(样式)功能

    源:如何使用XE2及更高版本中提供的自定义皮肤(样式)功能 1. 制作样式文件: 点击 XE2+ 的 IDE 菜单上的 Tools-->Bitmap Style Designer, 打开设计器. ...

  9. CSS3自定义滚动条样式

    原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...

随机推荐

  1. html基础整理（01居中 盒子问题）

    01 文字居中 将一段文字置于容器的水平中点,只要设置text-align属性即可: text-align:center; 02 容器水平居中   先为该容器设置一个明确宽度,然后将margin的水平 ...

  2. JavaScript变量那些事

    引言 JavaScript的变量本质是松散类型的,也就是说其变量就是用于保存特定值的一个名字,变量的值和数据类型可以在脚本执行的生命周期中发生变化.这是一个很有趣很强大的特性,但是也是一个极容易出错误 ...

  3. Nodejs统计每秒记录日志数

    问题:线上的写日志操作非常频繁,想统计每秒写了多少行数据?假如没法送一个消息写一个日志,问题也就变成了,每秒发送多少消息了. 日志采用log4js书写,格式如下: [-- ::33.548] [INF ...

  4. Python库大全

    网络 urllib -网络库(stdlib). requests -网络库. grab – 网络库(基于pycurl). pycurl – 网络库(绑定libcurl). urllib3 – Pyth ...

  5. openproject安装与使用

    思路: 1.生成config配置文件 2.导出配置文件,修改配置文件,删除容器,重新部署容器 3.登录后配置, 4.配置git,可以从openproject里查看gitlab上的代码库 第一次安装: ...

  6. Carte上面的作业1、2天就会丢失的问题

    发现Carte上面的作业莫名其妙就会没有,问了客户的维护人员说也没删除. 对象时间也是No Limit,但还是隔1.2天就不见了. 那说明之前配置这里还是无效 <slave_config> ...

  7. 题解51nod1515——明辨是非

    前提 在这道题老师讲过之后,再考时,我还是WA了ヽ(*.>Д<)o゜果然,我还是好菜啊~%?…,# *'☆&℃$︿★? 谢谢Jack_Pei dalao的帮忙.~~O(∩_∩)O~ ...

  8. Hibernate核心开发接口_SessionFactory详解

    SessionFactory: a)  用来产生和管理Session b)通常情况下每个应用只需要一个SessionFactory c)除非要访问多个数据库的情况 d) 关注两个方法即:  openS ...

  9. Javac之关于方法的调用1

    方法的调用从Attr类的visitApply()方法进入,如下: /** Visitor method for method invocations. * NOTE: The method part ...

  10. erlang尾递归练习

    1 %%计算链表长度尾递归实现 2 lez(N) -> lez(N, 0). 3 4 lez([], Acc) -> Acc; 5 lez([_ | T], Acc) -> lez( ...