自定义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>

更多专业前端知识，请上【猿2048】www.mk2048.com

自定义scoll样式相关推荐

Laravel自定义分页样式
Laravel 的分页组件默认为 Bootstrap 的分页样式,但如果我们用的并不是 Bootstrap 或者说分页的 HTML结构不一样,这时我们需要自定义分页.其实 Laravel 的分页组件是 ...
[转]C# winForm 自定义鼠标样式的两种方法
本文转自:http://www.cnblogs.com/hzbzxm/archive/2008/09/15/1291104.html 以前试过在WinForm中自定义鼠标样式,结果显示出来的鼠标变成单 ...
自定义Word样式模板，设置为默认模板
文章目录前言一.具体操作步骤前言由于在大学毕业写论文的时候,论文格式的要求十分严格,但是在完成论文编辑之后,发现这个论文的格式样式对于今后word排版大有益处,于是就将该论文的格式样式保存在一 ...
用css自定义滚动条样式
如果你是一个搞网页前端的,有必要了解一下自定义滚动条样式这个东东.目前支持自定义滚动条样式的有IE浏览器.webkit内核浏览器(chrome). IE下的滚动条样式 1.样式规则 scrollbar ...
自定义checkbox样式
通过选中时添加背景图片自定义CheckBox样式效果: CSS样式: <style type="text/css>label {width: 10%;display: flex ...
php复选框样式,如何自定义checkbox样式？附代码
本篇文章给大家带来的内容是关于如何自定义checkbox样式?附代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 修改原生checkbox样式. 效果原理 1.利用CSS3属性 ...
Arcgis for javascript不同的状态下自定义鼠标样式
俗话说:爱美之心,人皆有之.是的,没错,即使我只是一个做地图的,我也希望自己的地图看起来好看一点.在本文,给大家讲讲在Arcgis for javascript下如何自定义鼠标样式. 首先,说几个状态 ...
echarts自定义showlading()样式和文本
1.首先引入echarts.js 2.在页面定义自己的echarts变量 var myChart = echarts.init(document.getElementById('main')); 3. ...
android 滚动条自定义样式,IScroll的使用-方向键绑定自定义滚动条样式
之前在webkit上开发一个滚动控件,需要完成的是一段文字,上下键可以滚动,且自定义滚动条.第一想法就是浏览器原生overflow:scroll,且webkit支持自定义滚动条样式: webkit自定 ...

自定义scoll样式

自定义scoll样式相关推荐

最新文章

热门文章