使用伪类自定义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. leetcode-884-两句话中的不常见单词

    题目描述: 给定两个句子 A 和 B . (句子是一串由空格分隔的单词.每个单词仅由小写字母组成.) 如果一个单词在其中一个句子中只出现一次,在另一个句子中却没有出现,那么这个单词就是不常见的. 返回 ...

  2. ThreadLocal系列（一）-ThreadLocal的使用及原理解析

    ThreadLocal系列之ThreadLocal(源码基于java8) 项目中我们如果想要某个对象在程序运行中的任意位置获取到,就需要借助ThreadLocal来实现,这个对象称作线程的本地变量,下 ...

  3. 查看linux上面是否有安装redis

  4. HttpURLConnection发送GET、POST请求

    HttpURLConnection发送GET.POST请求 /** * GET请求 * * @param requestUrl 请求地址 * @return */ public String get( ...

  5. matplotlib画图无法显示图例 报错No handles with labels found to put in legend.

    很久没有matplotlib了,今天画图的时候发现了一个很小的问题....明明加了legend(),图表会出来,却无法正常显示图例.最后发现只要在plt.plot()加label图例就可以正常显示了.

  6. (Android 即时通讯) [悬赏]，无论是谁发现一个漏洞奖励人民币1000元！

    悬赏,无论是谁发现一个漏洞奖励人民币1000元!   3Q Android 手机版即时通讯系统正式推出,可与电脑版 地灵(http://im.yunxunmi.com) 即时通讯系统互通!  适用于: ...

  7. LeetCode-2. Add Two Numbers(链表实现数字相加)

    1.题目描述 You are given two non-empty linked lists representing two non-negative integers. The digits a ...

  8. python-TCP传输模型

    #!/usr/bin/python #coding=utf-8 #服务器端 from socket import * from time import ctime HOST="192.168 ...

  9. unity代码创建草和模拟风的效果

    void Start() { Test4(); } //草 private Vector3[] grassArray = new Vector3[7]; private GameObject gras ...

  10. 【LESS系列】高级特性

    前面我已经有一篇文章是写 LESS 的基础语法的. 那么这一次我们来看一下 LESS 的高级特性. 说起高级特性,首先也必须要一提的是模式匹配. 虽然个人觉得模式匹配的实用度其实也是一般般,但在关键时 ...