设置滚动条样式，css自定义滚动条样式
css怎样设置滚动条的颜色及样式
css设置滚动条的颜色
div{
scrollbar-face-color:#fcfcfc;
scrollbar-highlight-color:#6c6c90;
scrollbar-*-color:#fcfcfc;
scrollbar-3dlight-color:#fcfcfc;
scrollbar-arrow-color:#240024;
scrollbar-track-color:#fcfcfc;
scrollbar-dark*-color:#48486c;
scrollbar-base-color:#fcfcfc
}
滚动条样式主要涉及到如下CSS属性:
overflow属性:检索或设置当对象的内容超过其指定高度及宽度时如何显示内容
overflow: auto;在需要时内容会自动添加滚动条
overflow: scroll;总是显示滚动条
overflow-x: hidden;禁止横向的滚动条
overflow-y: scroll;总是显示纵向滚动条
width: 568px; width: 98%;设置区域的宽度[像素/百分比等等]
height: 120px;设置区域的高度[像素/百分比等等]
浏览器滚动条样式设置
在开发过程中会经常遇到列表过多，然后需要滚动显示的需求，然而浏览器自带的滚动条样式往往与项目整体界面风格不搭，并且还可能有点丑，就需要去调整他的样式。
目前我使用过两种方法：
1、隐藏滚动条，或者控制滚动条宽度。目前各个浏览器没有统一的样式处理，需要针对浏览器分别设置。
（1）chrome或safari：
node::-webkit-scrollbars{ width: 0;// display:none;}
（2）firefox
node{ scrollbar-width:none;}
（3）IE
node{-ms-overflow-style:none;}
2、修改滚动块，滚动槽的样式。目前只了解到chrome的样式修改
（1）chrome
node::-webkit-scrollbar-track{} //修改滚动槽的样式
node::-webkit-scrollbar-thumb{}//修改滚动块的样式
因为平时工作都是运用的react框架开发，所以经过我的一番呕心沥血的查找，发现了这个贼好用的插件！
安装： npm i react-custom-scrollbars
导入： import Scrollbars from”react-custom-scrollbars”;
可配置项：
class CustomScrollbars extends Component {
render() {
return (
<Scrollbars
onScroll={this.handleScroll} //滚动监听函数
onScrollFrame={this.handleScrollFrame}
onScrollStart={this.handleScrollStart}//滚动开始时执行的函数
onScrollStop={this.handleScrollStop} //滚动结束时执行的函数
onUpdate={this.handleUpdate}
renderView={this.renderView}
//自定义水平滚动槽样式
renderTrackHorizontal={(props)=><div className=”my-style”{…props}></div>}
//自定义垂直滚动槽样式
renderTrackVertical={(props)=><div className=”my-style”{…props}></div>}
//自定义水平滚动块样式
renderThumbHorizontal={(props)=><div className=”my-style”{…props}></div>}
//自定义垂直滚动块样式
renderThumbVertical={(props)=><div className=”my-style”{…props}></div>}
autoHide //鼠标移除自动隐藏
autoHideTimeout={1000} //设置隐藏的延迟执行时间
autoHideDuration={200} //设置隐藏动画的持续时间
autoHeight //根据所包含的节点自动调整高度
autoHeightMin={0}//自动调整的最小高度
autoHeightMax={200}//自动调整的最大高度，超过则滚动显示
thumbMinSize={30}//滚动块的最小高度（默认自适应）
universal={true}
{…this.props}>
…需要滚动显示的dom树
</Scrollbars>
);
}
}
如何修改滚动条的默认样式
页面布局中，当内容超出盒子时，为了美观，会将超出的部分设置滚动条效果，有些浏览器默认的滚动条非常的丑，那你知道如何修改滚动条样式吗？这篇文章将会教你怎么设置滚动条样式。
/*作为IT界最前端的技术达人，页面上的每一个元素的样式我们都必须较真，就是滚动条我们也不会忽略。下面我给大家分享一下如何通过CSS来控制滚动条的样式，代码如下：*/ 1/*定义滚动条轨道*/
#style-2::-webkit-scrollbar-track
{
background-color:#F5F5F5;
-webkit-box-*: inset 0 0 6px rgba(0, 0, 0, 0.22);
}
/*定义滚动条高宽及背景*/
#style-2::-webkit-scrollbar
{
width: 10px;
background-color: rgba(0, 0, 0, 0.34);
}
/*定义滚动条*/
#style-2::-webkit-scrollbar-thumb
{
background-color:#8b8b8b;
border-radius: 10px;
}要实现单个div里面的内容滚动，需要满足三个条件：
1、div必须设定固定的高度，不能使用百分比或 auto等弹性值。
2、其中的内容高度必须超过它本身的高度。
3、必须添加属性“overflow：auto”。
隐藏滚动条：
1、去掉水平方向的滚动条：
<body style=”overflow-x:hidden”>
2、去掉垂直方向的滚动条：
<body style=”overflow-y:hidden”>
3、隐藏横向、显示纵向滚动条：
<body style=”overflow-x:hidden;overflow-y:scroll”>
4、隐藏全部滚动条：
<body style=”overflow:hidden”>或者<body scroll=”no”>
更好的方法就是把滚动条的颜色设置为完全透明，这样既可以实现内容的滚动，又达到不显示滚动条的目的。
应用:
没有水平滚动条:
<div style=”overflow-x:hidden”>test</div>
没有垂直滚动条
<div style=”overflow-y:hidden”>test</div>
没有滚动条
<div style=”overflow-x:hidden;overflow-y:hidden”或 style=”overflow:hidden”>test</div>
自动显示滚动条
<div style=”height:100px;width:100px;overflow:auto;”>test</div>
自己定义滚动条的颜色，代码如下：
Body{
scrollbar-arrow-color:#f4ae21;/*三角箭头的颜色*/
scrollbar-face-color:#333;/*立体滚动条的颜色*/
scrollbar-3dlight-color:#666;/*立体滚动条亮边的颜色*/
scrollbar-highlight-color:#666;/*滚动条空白部分的颜色*/
scrollbar-*-color:#999;/*立体滚动条阴影的颜色*/
scrollbar-dark*-color:#666;/*立体滚动条强阴影的颜色*/
scrollbar-track-color:#666;/*立体滚动条背景颜色*/
scrollbar-base-color:#f8f8f8;/*滚动条的基本颜色*/
Cursor:url(mouse.cur);/*自定义个性鼠标*/
}以上2项适用与<body>、<div>、<textarea>、<iframe>
附：解释一下overflow属性和不同值得作用：
overflow:visible;不剪切内容也不添加滚动条。默认值。使用该值时，无论设置的”width”和”height”的值是多少，其中的内容无论是否超出范围都将被强制显示。
overflow：auto；在需要时剪切内容并添加滚动条。
overflow：hidden；不显示超过对象高度的内容。
overflow：scroll；总是显示纵向滚动条。
overflow水平及垂直方向内容溢出时的设置
overflow-x水平方向内容溢出时的设置
overflow-y垂直方向内容溢出时的设置
以上属性设置的值为visible、scroll、hidden、auto
hidden效果与visible相反。任何超出”width”和”height”的内容都会不可见。
scroll无论内容是否超越范围，都将显示滚动条。
用css怎么设置div滚动条的样式,可改变大小的
在css设置可改变大小的div滚动条样式方法：
1.首先新建html文档，进入代码书写界面。
2.在</head>和<body>的里面写入代码，在<div>里面写入想要输入的内容</div>。
3.书写外层轨道css代码。body::-webkit-scrollbar{ width:20px; height:2px; background:#ccc; border-radius:10px;/*外层轨道*/}
这里主要是设置外层轨道的形状和颜色。
4.书写内层轨道css代码。body::-webkit-scrollbar-thumb{ display:block; width:6px; margin:0 auto; border-radius: 10px; background:red;/*内层轨道*/}
这里主要是设置内层轨道的形状和颜色。
5.代码工作做完后，就可以查看效果，效果如下红框所示，滚动条设置完成。
本文链接：http://www.po-te.com/html/87964583.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件举报，一经查实，本站将立刻删除。
相关推荐
-
江西人事档案(人事档案十大分类详细)
南昌高校毕业生档案管理服务中心的电话号码南昌市人才开发交流服务中心（负责高校毕业生档案管理）*：0791—86775669。 南昌市人才开发交流服务中心成立于1984年10月，是市人力资源和社会保障局下属副县级财政拨款公益一类事业单位。中心内设6个职能科室：办公室、人事档案管理科、流动*员管理科、人才评价推荐科（信息技术科）、人才培训科、人才服务科。 扩展资…
-
湘潭大学学工在线 湘潭大学化工学院*奖学金
请问湘潭大学自考本科文凭*承认吗是承认的。自考本科文凭是*颁发的，当然也是*所承认的。 湘潭大学的自考本科，是湖南省主管部门和教育考试院指定的官方自考主考院校，湘潭大学是正规公办大学！ 一、自考文凭*承认吗？ 自考本科是*给颁发本科证书，是*承认学历在学信网可以查到的，自考本科相对于*高考、网络教育、电大教育等形式的含金量较高的一种。在社会上得到广泛认可，国…
-
南宁虚拟空间，特价虚拟空间
南宁的中小企业电子商务发展那么缓慢南宁的中小企业电子商务发展那么缓慢？ 呵呵，同道中人哦。我是广西柳州人，电子商务专业毕业2年了。 我都后悔那时候报这个专业。要知道这个电子商务专业在这两年来虽说还算是新行业。但是在很多大学里都还是凑个数而已，别的大学都有这个专业了。你大学里能没有这个专业么。于是很多学校就纷纷开办了这个专业。 然而师资力量却不雄厚，教这个专业…
-
愤怒的小鸟中文版免费下载(愤怒的小鸟游戏最新版)
愤怒的小鸟电脑版怎么下载下载方法如下： 1、打开浏览器，搜索“愤怒的小鸟官方网站”。 2、进入官方网站后，找到“下载”或“Download”按钮。 3、点击下载按钮，选择适用于电脑的版本。 4、下载完成后，双击安装包进行安装。 5、按照安装向导的提示完成安装过程。 6、安装完成后，桌面或开始菜单会生成愤怒的小鸟的图标。 7、双击图标即可开始游戏。 愤怒的小鸟…
-
大唐双龙夺艳记(大唐寻芳谱 小说)
大唐双龙记师妃暄最后结局如何最后结局：师妃暄与徐子陵有缘无份。 师妃暄，黄易长篇武侠小说《大唐双龙传》中“慈航静斋”继承人。 她与徐子陵的那段精神爱恋，如梦似幻，铭心刻骨。却因自己身负圣女身份，不能涉及儿女私情，只能把感情压抑，收在心底，最终两人有缘无份。 小说描写中，师妃暄的功力超过师父梵清惠，接近最高层次的剑心通明。 书中她与阴癸派传人婠婠展开激烈竞争，…
-
火炬之光2外星人，火炬之光2找到更多的机器人零件
求2D单机游戏最近2D的游戏很多都不错啊！ 先介绍经典的： 《伊苏》系列：流畅的*作感、爽快的打击度，绚丽的技能，清丽的界面。 个人很喜欢伊苏系列！！特别是《伊苏：起源》这款。 剧情一个比一个紧凑！ 斧头MM的剧情最简单，过来是魔法男的。 但没想到，通了2个角色后，还会出来一个隐藏角色——勾爪 更没想到的是，勾爪男的剧情才是最让人感慨的！ 很不错的游戏！不是…
-
东兴市人才网，东兴口岸买房落户政策
东兴口岸买房落户政策 1、外埠人员在沈购买成套住房,取得合法的房屋产权证,准予本人、配偶及未婚子女及同住父母办理落户。 2、办理手续如下：申请书，身份证，户口薄，婚姻状况证明，产权证，契税证，2008年7月1日以后外埠居民购买的二手房，取消《房地产转让（落户购房）登记申请审批表》，改为《销售不动产统一发票办证联》，办理户口登记申请书。以上材料均需复印件。 3…
-
欧洲杯积分榜 欧预赛分组积分榜2023
欧洲杯积分榜排名2022年欧洲杯积分榜排名是： A组：意大利*队9分，威尔士*队4分，瑞士*队4分，土耳其*队0分。 B组：比利时*队9分，丹麦*队3分，芬兰*队3分，俄罗斯*队3分。 C组：荷兰*队9分，奥地利*队6分，乌克兰*队3分，北马其顿*队0分。 D组：英格兰*队7分，克罗地亚*队4分，捷克*队4分，苏格兰*队1分。 E组：瑞典*队7分，西班牙*队…
-
再次我的人生在线观看？《我的人生》电影
再次我的人生一共多少集《再次我的人生》一共16集，每集约60分钟。《再次我的人生》于2022年4月8日在韩国SBS电视台金土档首播。韩国播出时间：每周五、六22:00各播放一集，中字更新时间：每周六、日上午更新。 《再次我的人生》是由韩哲洙执导，J、金律编剧，李准基、李璟荣、金智恩等主演的电视剧，于2022年4月8日在韩国SBS电视台金土档首播。改编自同名小…
-
梦见自己的车着火，女人梦见自家小汽车发生自燃
梦见自己汽车着火的预兆1、梦见自己汽车着火的预兆 虽得尊长（或上司）之爱护提拔，或祖先之余德，而必可成功发展，但基础是（土在上而木在下）之相克而含有崩败运，故境遇多凶变，财帛易散，成败频见，身份也因之时贵、时贱。【吉多于凶】 吉凶指数：88（内容仅供参考，不代表本站立场） 2、梦见自己汽车着火的宜忌 「宜」宜相信未来，宜自言自语，宜洗车。 「忌」忌问路，忌多…
