使用伪类自定义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. jquery源码解析：jQuery数据缓存机制详解1

    jQuery中有三种添加数据的方法,$().attr(),$().prop(),$().data().但是前面两种是用来在元素上添加属性值的,只适合少量的数据,比如:title,class,name等 ...

  2. docker 实例设置自动重启

    yaml格式太严格了,每个冒号后面都必须带有空格在linux中./代表当前目录,属于相对路径../代表上一级目录,属于相对路径/代表根目录,/开头的文件都是绝对路径./configure的意思是执行当 ...

  3. PHP错误——Allowed memory size of 134217728 bytes exhausted (tried to allocate 32 bytes)

    解释是可用内存已耗尽,这关系到PHP的memory_limit的设置问题. 这里有两种方法解决 1.修改php.ini memory_limit = 128 打开终端输入下列bash命令 cd /pr ...

  4. Python标准库中的生成器函数

    一.用于过滤的生成器函数 - 从输入的可迭代对象中产出元素的子集,而不修改元素本身 import itertools l1 = [1,2,3,4,5] l2 = [True,False,True,Fa ...

  5. vue.js - axios Get、Post方法传参给 .net core webapi。

    一:axios中是 Get请求: 1:在vue项目中通过params属性携带数据: let _self = this; axios({ method:'get', url:'http://localh ...

  6. Linux - iptables firewalld

    目录 iptables firewalld iptables 1.iptables 的基本使用 启动: service start iptabls 关闭: service stopiptabls 查看 ...

  7. docker pull 私有镜像

    错误演示 [root@CentOS7 jdk8]# curl http://10.20.2.29:5000/v2/_catalog {"repositories":["d ...

  8. .Net Core 发布异常 An assembly specified in the application

    在Core 2.0站点发布时.. DotNet WW.kkkk.dll 报错..报文内容如下: Error: An assembly specified in the application depe ...

  9. [Xamarin] 開啟另外一個Activity 並且帶資料 (转帖)

    每隻App是透過許多畫面所組成的,當然可能主畫面之外,都會有許多其他的頁面 再Android 設計中畫面會有配合的Activity 當然在這之前,最好事先了解一下,Android 關於生命週期的規劃 ...

  10. MySQL设置远程连接服务器

    默认情况下,mysql只允许本地登录,如果要开启远程连接,则需要修改/etc/mysql/my.conf文件. 一.修改/etc/mysql/my.conf找到bind-address = 127.0 ...