【转载】HTML自定义滚动条(仿网易邮箱滚动条)
转载:
自定义滚动条
在web前端非常火爆的今天,好的界面可以给人们很好的体验。浏览器的滚动条总是千篇一律,那么滚动条是否可以自定义呢?网上好多自定义滚动条通过CSS样式来设置的,但是这种做法只有IE支持,那么谷歌浏览器是否也可以自定义滚动条呢?
前一段时间浏览网易邮箱的时候发现它上面的滚动条挺不错的,如下图:
从上图可以看出网易126邮箱的滚动条是这种纤细的滚动条,那么它是怎么实现的呢,赶紧F12看看人家的代码,学习完了给大家分享分享。
它是使用CSS中的伪元素来实现的,主要由以下三个来完成:
1. -webkit-scrollbar:定义滚动条的样式,如长宽。
2. -webkit-scrollbar-thumb:定义滚动条上滑块的样式。
3. -webkit-scrollbar-track:定义滚动条主干部分(背景)的样式。
接下来我们就把它的核心代码拿下来瞧瞧。
滚动条样式
.nui-scroll::-webkit-scrollbar {width: 8px;//表示垂直滚动条的宽度height: 8px;//表示水平滚动条的高度
}
- 1
- 2
- 3
- 4
可以看出给了一个nui-scroll这么一个类选择器,然后设置滚动条的样式。width和height的含义上面已经给出了。
滚动条滑块样式
/*正常情况下滑块的样式*/
.nui-scroll::-webkit-scrollbar-thumb {background-color: rgba(0,0,0,.05);border-radius: 10px;-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
}
/*鼠标悬浮在该类指向的控件上时滑块的样式*/
.nui-scroll:hover::-webkit-scrollbar-thumb {background-color: rgba(0,0,0,.2);border-radius: 10px;-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
}
/*鼠标悬浮在滑块上时滑块的样式*/
.nui-scroll::-webkit-scrollbar-thumb:hover {background-color: rgba(0,0,0,.4);-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
滑块的样式也很简单。
滚动条主干部分样式
/*正常时候的主干部分*/
.nui-scroll::-webkit-scrollbar-track {border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);background-color: white;
}
/*鼠标悬浮在滚动条上的主干部分*/
.nui-scroll::-webkit-scrollbar-track:hover {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.4);background-color: rgba(0,0,0,.01);
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
我们的代码基本上就完了,最后设置一下该控件显示滚动条,要显示滚动条那么就得给定它的宽和高并且设置其样式overflow为auto。
显示滚动条
.nui-scroll{margin-left: 100px;/*为了咱们看着好看就向右移动一点*/border: 1px solid #000;/*给个边框看着更舒服*/width: 200px;/*设置宽*/height: 500px;/*设置高*/overflow: auto;/*当内容溢出时显示滚动条*/
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
有了上面的类,我们再定义一个DIV使用该类就大功告成了!
<div class="nui-scroll">123<br/>123<br/><!--这里有好多上面这结构为了节省篇幅就省去了-->
</div>
- 1
- 2
- 3
- 4
- 5
最后我们运行一下看看结果:
最后给出所有的代码,小伙伴们可以直接把代码拷过去稍加修改做成更加高大上的滚动条,如果大家懒得粘贴也可以直接下载代码,不要任何币,完全免费哦。
完整代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>滚动条示例</title><style type="text/css">.nui-scroll{margin-left: 100px;border: 1px solid #000; width: 200px;height: 500px;overflow: auto;}.nui-scroll::-webkit-scrollbar {width: 8px;height: 8px;}/*正常情况下滑块的样式*/.nui-scroll::-webkit-scrollbar-thumb {background-color: rgba(0,0,0,.05);border-radius: 10px;-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);}/*鼠标悬浮在该类指向的控件上时滑块的样式*/.nui-scroll:hover::-webkit-scrollbar-thumb {background-color: rgba(0,0,0,.2);border-radius: 10px;-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);}/*鼠标悬浮在滑块上时滑块的样式*/.nui-scroll::-webkit-scrollbar-thumb:hover {background-color: rgba(0,0,0,.4);-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);}/*正常时候的主干部分*/.nui-scroll::-webkit-scrollbar-track {border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);background-color: white;}/*鼠标悬浮在滚动条上的主干部分*/.nui-scroll::-webkit-scrollbar-track:hover {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.4);background-color: rgba(0,0,0,.01);}</style>
</head>
<body><div class="nui-scroll">123<br/>123<br/><!--这里有好多上面这结构为了节省篇幅就省去了--></div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
<link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-60ecaf1f42.css" rel="stylesheet"><div class="more-toolbox"><div class="left-toolbox"><ul class="toolbox-list"><li class="tool-item tool-active is-like "><a href="javascript:;"><svg class="icon" aria-hidden="true"><use xlink:href="#csdnc-thumbsup"></use></svg><span class="name">点赞</span><span class="count">4</span></a></li><li class="tool-item tool-active is-collection "><a href="javascript:;" data-report-click="{"mod":"popu_824"}"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-csdnc-Collection-G"></use></svg><span class="name">收藏</span></a></li><li class="tool-item tool-active is-share"><a href="javascript:;" data-report-click="{"mod":"1582594662_002"}"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-csdnc-fenxiang"></use></svg>分享</a></li><!--打赏开始--><!--打赏结束--><li class="tool-item tool-more"><a><svg t="1575545411852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5717" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M179.176 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5718"></path><path d="M509.684 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5719"></path><path d="M846.175 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5720"></path></svg></a><ul class="more-box"><li class="item"><a class="article-report">文章举报</a></li></ul></li></ul></div></div><div class="person-messagebox"><div class="left-message"><a href="https://blog.csdn.net/javao_0"><img src="https://profile.csdnimg.cn/5/F/B/3_javao_0" class="avatar_pic" username="javao_0"><img src="https://g.csdnimg.cn/static/user-reg-year/1x/5.png" class="user-years"></a></div><div class="middle-message"><div class="title"><span class="tit"><a href="https://blog.csdn.net/javao_0" data-report-click="{"mod":"popu_379"}" target="_blank">javao_0</a></span></div><div class="text"><span>发布了13 篇原创文章</span> · <span>获赞 17</span> · <span>访问量 5万+</span></div></div><div class="right-message"><a href="https://im.csdn.net/im/main.html?userName=javao_0" target="_blank" class="btn btn-sm btn-red-hollow bt-button personal-letter">私信</a><a class="btn btn-sm bt-button personal-watch" data-report-click="{"mod":"popu_379"}">关注</a></div></div></div>
【转载】HTML自定义滚动条(仿网易邮箱滚动条)相关推荐
- HTML自定义滚动条(仿网易邮箱滚动条)
自定义滚动条 在web前端非常火爆的今天,好的界面可以给人们很好的体验.浏览器的滚动条总是千篇一律,那么滚动条是否可以自定义呢?网上好多自定义滚动条通过CSS样式来设置的,但是这种做法只有IE支持,那 ...
- css+js校验 实现仿网易邮箱注册界面 和 校验 功能
css+js校验 实现仿网易邮箱注册界面 和 校验 功能 先来看看最终的效果图吧ヾ(≧▽≦*)o 代码如下: <!DOCTYPE html> <html lang="en& ...
- 仿网易邮箱大师进度框
仿网易邮箱大师进度框 最近用上了网易邮箱大师,发现整个APP的风格非常简洁美观.特别喜欢它的进度框,就尝试用属性动画做了一个,算是对属性动画学习的实践. 先上效果图: 图像构成 这个图像由三段弧线构成 ...
- 仿网易邮箱5.0(三):panel.js
今天我们首先来接触第一个用到的插件--Neter.Panel(登录框),在这个插件中,主要的操作有:添加一个标签,更新标签,删除标签. 还是先上代码: View Code 1 /** 2 * 面板插件 ...
- jQuery formValidator 表单校验插件4.1.1高仿网易邮箱注册页面(已发演示链接)
[密码强度校验]实现了,集成在插件里. 现在跟126邮箱注册一摸一样! 演示链接: http://www.yhuan.com/formValidator4.1.1/demo8.html 官方网址:ht ...
- Android仿qq邮箱账号邮件账号输入框交互
Android自定义ViewGroup仿qq邮箱发件人.收件人输入交互 直接上图看效果 如何使用看我的Github
- 自定义滚动条,可解决火狐滚动条默认样式修改不了问题
优化: 优化了移动设备上,页面滑动距离和滚动条滚动距离比例不正确问题 背景: 在项目开发中,由于项目住效果图背景色属于深色系,但是火狐浏览器的默认滚动条样式是一个白色的宽条,两者结合样子太丑,所以尝试 ...
- svelte-scrollbar: 基于svelte.js自定义滚动条组件|svelte3虚拟滚动条
基于svelte3.x构建轻量级自定义pc端虚拟滚动条组件SvelteScrollbar.支持原生滚动条.自动隐藏.垂直+水平滚动.自定义尺寸/颜色及间隔等功能. 在lib目录下新建Scrollbar ...
- html任务3 模拟滚动条,vue3系列:vue3.0自定义虚拟滚动条V3Scroll|vue3模拟滚动条组件...
/** * @Desc Vue3.0虚拟滚动条组件V3Scroll * @Time andy by 2021-01 * @About Q:282310962 wx:xy190310*/ props: ...
- jQuery——自定义浏览器滚动条,改变滚动条样式。实现滚动条效果
自定义浏览器滚动条,并实现滚动条功能 废话少说,直接上代码: HTML <div class="scroll-box" onscroll="onScroll()&q ...
最新文章
- python入门新手项目-Python入门实战项目有哪些适合新手?
- 4.Eclipse的安装和使用
- Canonical 开源 MicroK8 | 云原生生态周报 Vol. 25
- 第十二届蓝桥杯大赛软件赛省赛第二场 C/C++ 大学B组
- C++代码片段(四)萃取模板类的模板参数类型
- 操作系统:第二章 进程管理2 - 处理机调度
- 方差分析 球形检验_两因素重复测量设计做方差分析时,球形检验没有结果怎么回事?...
- MongoDB SpringData去掉自动生成的_class字段
- 宝塔服务器管理助手Linux面版-使用教程
- LightOJ1245 Harmonic Number (II) —— 规律
- varchar2(数值)和varchar2(数值 char)的说明
- 【Python】二分法求函数零点
- vue 页面保存为本地图片
- 第一课print()输出函数(包含心形图案代码)
- Deepin 微信版本太低无法登录
- python图像倾斜校正_霍夫变换 文本图片倾斜矫正 python实现
- 2019第二届中国天津国际智慧消防高峰论坛
- Matlab 关闭提醒,开始使用MATLAB?[关闭]
- python世界地图代码_[python] 几行代码也能玩转世界地图?
- linux sdb空间转移,Linux系统sda变sdb的解决