自定义scoll样式
使用伪类自定义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样式的更多相关文章
- Siteserver-stl:searchOutput(搜索结果)自定义显示样式
stl:searchOutput 自定义显示样式 自定义搜索提交表单需要在<stl:searchOutput>中嵌入显示搜索结果的标签,必须包含的标签 有<stl:pageConte ...
- jQuery自定义滚动条样式插件mCustomScrollbar
如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...
- 自定义plain 样式的 tableview,模拟器上不显示分割线,真机上却显示分割线.
一, 经历 1> 自定义plain 样式的 tableview,模拟器上不显示分割线,真机上却显示cell 下面的分割线. 2> 尝试使用表格的separatorStyle属性,尝试失败. ...
- Winform自定义窗体样式，实现标题栏可灵活自定义
最近在编写C/S结构应用程序时,感觉窗体的标题栏样式太死板了,标题文字不能更改大小.颜色.字体等,按钮不能隐藏等问题,在网上也查找了许多相关的资料,没有找到合适的解决方案,发现许多人也在寻求这个问题, ...
- WPF 自定义滚动条样式
先看一下效果: 先分析一下滚动条有哪儿几部分组成: 滚动条总共有五部分组成: 两端的箭头按钮,实际类型为RepeatButton Thumb 两端的空白,实际也是RepeatButton 最后就是Th ...
- Android设置选项开发及自定义Preference样式
一个完整的Android应用程序都应该提供选项(或者叫偏好设置等等)让用户对APP的表现形式能够进行设置,比如说是否加入用户体验计划,或者是否自动升级.定时提醒.开启自启动.后台运行等等.提供一个好的 ...
- Android: 自定义Tab样式,一种简单的方式。
之前看到过论坛里已经有人发过自定义Tab样式的帖子,感觉有些复杂了,这里分享个简单的方法. 1.制作4个9patch的tab样式,可参考android默认的资源 tab_unselected.9.pn ...
- 如何使用XE2及更高版本中提供的自定义皮肤(样式)功能
源:如何使用XE2及更高版本中提供的自定义皮肤(样式)功能 1. 制作样式文件: 点击 XE2+ 的 IDE 菜单上的 Tools-->Bitmap Style Designer, 打开设计器. ...
- CSS3自定义滚动条样式
原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...
随机推荐
- [科普] 借助 everything 扩展教你屏蔽网址或转发网址
教你屏蔽网址或转发网址 万恶之源 为什么写这篇文章,俺觉得大家应该是有这个需(bai)求(du)的.只是不知道如何操作... 一.屏蔽网址 1.借助系统自带防火墙 (不推荐) Linux 下有 ipt ...
- time 模块学习
前情提要: time模块是经常使用的模块.主要是用来记录时间,以及时间上的相关操作 一:时间戳 1:第一种形式 import time print(time.time()) 从1970 1 1 0:0 ...
- Libra的第一天
wuli乖乖,今天是你降生第一天,以后的几年可能我们都会朝夕相处,你的成长就是我的向上,一起加油吧
- 常用的PHP超全局变量$_SERVER 收集整理
传送带:https://www.cnblogs.com/rendd/p/6182918.html
- 静态网页、动态网页、apache和tomcat之间区别和联系
1.静态网页 静态网页:在网站设计中, 纯粹的HTML(标准通用标志语言下的一个应用)格式的网页通常被称为"静态网页",静态网页是标准的HTML文件,它的拓拓展名是.html或者. ...
- shell ssh远程执行命令
[root@backup shell]# vi backup.sh #!/bin/sh ipAddress=172.17.167.38 ssh -tt root@$ipAddress -p 22 &l ...
- vue环境搭建简介
简单整理下vue的安装的新建项目 安装node.js和npm 参考其他教程 安装vue npm install vue 安装脚手架 vue-cli npm install --global vue-c ...
- 02-url路由分配及模板渲染方式
本章主要内容 1.url基本概念及格式 2.path和re_path 3.模板路径配置 4.模板渲染方式 1.url基本概念及格式 URL(uniform Resoure Locator)统一资源定位 ...
- apache访问快捷方式
<VirtualHost *:80> DocumentRoot "XXX" ServerName XXX Alias /pdodata/ "XXX" ...
- （转）Asp.Net Mvc视图引擎Razor介绍
Asp.Net Mvc视图引擎Razor介绍 1.Razor介绍 程序园原创,转载请注明:http://www.kwstu.com/ArticleView/dabaomvc_2014082408205 ...