使用伪类自定义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. [VB6.0-->VB.NET]关于VB6.0升级到VB.NET的微软官方文档

    升级流程大体是这样的: 1.用VS2008打开Vb6.0的工程(此时针对语言层面自动升级). 注: VS更新多版了(当前最新VS2017),用最新版再打开2008升级后的工程的时候还是会有自动升级,相 ...

  2. C#-WebForm-★★★JQuery-动画★★★

    1.show(),hide() 瞬间显示或隐藏,隐藏后不占有位置 2.slideDown(),slideUp() 向下拉伸显示,向上缩减隐藏 3.fadeIn(),fadeOut() 渐显或渐隐,隐藏 ...

  3. Java中静态变量的声明位置

    Java中静态变量只能是成员变量,局部方法中的局部变量除final外不能有任何其他修饰符,例如: public class Test { static String x = "1" ...

  4. #Go# 点滴积累

    此篇仅为不断记录趟过的坑 StringToTimestamp import ( "time" ) const TimeFormat = "2006-01-02T15:04 ...

  5. selenium和appium启动的感悟

    阅读源码后整理记录如下: selenium : 1.若为webdriver.Chrome()方式启动:①子程序打开chromedriver.exe程序,程序打开后,监听9515端口作为remote_s ...

  6. docker + nginx 部署vuejs3.0项目

    1:用指令 npm run build 打包vusjs项目(该项目是在github上下载的).打包成功后会生成一个目录dist. 2:把该文件夹拷贝到腾讯云服务器(操作系统 centos7)下的/us ...

  7. Winform控件的问题汇总

    2014-01-19号 用户控件中的子控件(Btn控件),想要暴露到用户控件之外,以供其它其他控件使用的解决方法 1.在用户控件中定义一个委托和这个委托的事件. public delegate voi ...

  8. 《LeetBook》leetcode题解(11):Container With Most Water[M] ——用两个指针在数组内移动

    我现在在做一个叫<leetbook>的免费开源书项目,力求提供最易懂的中文思路,目前把解题思路都同步更新到gitbook上了,需要的同学可以去看看 书的地址:https://hk029.g ...

  9. JavaScript设计模式-14.组合模式实现

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. orcale 之sql/plus set 命令

    set 命令用于设置系统变量的值.通过set 命令设置的系统变量有很多,下面把最常用的罗列出来: 1. arraysize 用于从数据库中一次提取的行数,其默认为 15. SQL> show a ...