css滚动条样式自定义
很简单的几行代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.out {
width: 600px;
height: 600px;
margin: 100px auto;
overflow-y: auto;
}
/* 滚动条整体样式(高宽分别对应横竖滚动条的尺寸) */
.out::-webkit-scrollbar {
width: 5px;
height: 5px;
}
/* 滚动条里面小方块 */
.out::-webkit-scrollbar-thumb {
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}
/* 滚动条里面轨道 */
.out::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="out">
<p style="height:250px;background: #ccc;">段落一</p>
<p style="height:250px;background: #eee;">段落二</p>
<p style="height:250px;background: #ccc;">段落三</p>
</div>
</body>
</html>
最终效果图:
css滚动条样式自定义的更多相关文章
- HTML+CSS 滚动条样式自定义 - 适用于 div,iframe, html 等
友言:这两天被滚动条整的无与伦比,在此做下总结: 首先自定义浏览器滚动条的实现原理:计算浏览器滚动条的高度,层级1的高度与滚动条的总高度是一样的,通过相似比例计算: 浏览器滚动条总高度 :滚动条高度 ...
- css 滚动条样式
1,Overflow内容溢出时的设置 overflow 水平及垂直方向内容溢出时的设置 overflow-x 水平方向内容溢出时的设置 overflow-y 垂直方向内容溢出时的设置 以上三个属性设置 ...
- css滚动条样式修改
.activeMoreBankList{ height: 188px; overflow-y: auto;} /*滚动条样式*/.activeMoreBankList::-webkit-scrollb ...
- CSS滚动条样式设置
webkit浏览器css设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ...
- CSS滚动条样式定制
效果图如下 <!DOCTYPE html> <!-- saved from url=(0061)http://www.xuanfengge.com/demo/201311/scrol ...
- [CSS]滚动条样式设置
概述 最近项目中需要,将一个页面嵌入在一个webbrower中,这个webrower是定高的,在页面内容超过webbrower高度时,需要以滚动条的形式展现,当时也考虑了使用webbrower的滚动条 ...
- css滚动条样式
1.横向滚动条:(abeamScroll) <div style="width:400px;height:200px;overflow-x:auto;overflow-y:hidden ...
- 使用css实现无滚动条滚动+使用插件自定义滚动条样式
使用css实现无滚动条滚动,摘抄自:曹小萌博客 使用css实现无滚动条滚动,大体思路是在div外面再套一个div.这个div设置overflow:hidden.而内容div设置 overflow-x: ...
- 如何自定义CSS滚动条的样式?
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表 本文会介绍CSS滚动条选择器,并在demo中展示如何在Webkit内核浏览器和IE浏览器中,自定义一个横向以及一个纵向的 ...
随机推荐
- PHP 科学计数 转 Double
本文转自:https://stackoverflow.com/questions/4576927/convert-a-string-containing-a-number-in-scientific- ...
- EF(EntityFramework)与mysql使用,错误终极解决方案
我昨天写了好多篇跟mysql有关的错误,但是在今天我发现好像所有的问题都是一个原因引起的: 版本问题,我原先使用的是MySql.Data.Entity.EF6(版本号:6.10.5),今天我换成6.9 ...
- linux下定时执行任务的方法
linux下定时执行任务的方法 在LINUX中你应该先输入crontab -e,然后就会有个vi编辑界面,再输入0 3 * * 1 /clearigame2内容到里面 :wq 保存退出. 在LINUX ...
- SVN的工作原理及流程手册
1.什么是SVN ? SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS. 互联网上很多版本控制服务已从CVS迁 ...
- mybatis_12延时加载_懒加载
延时加载:也叫懒加载 2.1 延迟加载 延迟加载又叫懒加载,也叫按需加载.也就是说先加载主信息,在需要的时候,再去加载从信息. 在mybatis中,resultMap标签 的association标签 ...
- 【Java每日一题】20170323
20170322问题解析请点击今日问题下方的“[Java每日一题]20170323”查看(问题解析在公众号首发,公众号ID:weknow619) package Mar2017; public cla ...
- layui 自定义表单验证的几个实例
*注:使用本方法请先引入layui依赖的layu.js和layui.css 1.html <input type="text" name="costbudget&q ...
- 《JavaScript高级程序设计》笔记:基本概念(三)
数据类型 ECMAScript中有5种简单数据类型(也称为基本数据类型):undefined,null,boolean,number和string. typeof typeof null会返回“obj ...
- Android为TV端助力 Intent匹配action,category和data原则
1.当你在androidmanifest里面定义了一个或多个action时 你使用隐式意图其他activity或者service时,规定你隐式里面的action必须匹配XML中定义的action,可以 ...
- (python)排序算法
一.冒泡排序 1.冒泡排序实现思路 需要两层循环,外层循环控制总共循环几次,内层循环控制交换的次数(注意索引超界的问题). 外层第一次循环,内层第一次循环,将第一个元素(y)与第二个元素(y+1)进行 ...