1.overflow设置滚动条

/* 设置y轴滚动条 */
overflow-y:auto
/* 设置x轴滚动条 */
overflow-x:auto

2.设置滚动条样式

         ::-webkit-scrollbar {width: 8px;height: 10px;}::-webkit-scrollbar-button {background-color: red;}::-webkit-scrollbar-track-piece {background: yellow;}::-webkit-scrollbar-thumb {background: blue;border-radius: 4px;}

3.html整体代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#main {width: 500px;height: 200px;overflow-y: auto;background: #9aacc4;}/*修改滚动条样式*/#main::-webkit-scrollbar {width: 4px;/*高宽分别对应横竖滚动条的尺寸*/height: 0px;}#main::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);background: rgba(0, 0, 0, 0.2);}#main::-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);}#main1 {width: 474px;height: 150px;margin-right: 20px;overflow-y: auto;background: darkseagreen;margin: 10px;}/*修改滚动条样式*/#main1::-webkit-scrollbar {width: 8px;height: 10px;}#main1::-webkit-scrollbar-button {background-color: red;}#main1::-webkit-scrollbar-track-piece {background: yellow;}#main1::-webkit-scrollbar-thumb {background: blue;border-radius: 4px;}ul li {margin-bottom: 30px;margin-right: 10px;background: chartreuse;}</style></head><body><div id="main"><ul><li>文本1文本1文本1文本1文本1</li><li>文本2文本2文本2文本2文本2</li><li>文本3文本3文本3文本3文本3</li><li>文本4文本4文本4文本4文本4</li><li>文本5文本5文本5文本5文本5</li></ul><div id="main1"><ul><li>文本1</li><li>文本1</li><li>文本1</li><li>文本1</li><li>文本1</li></ul></div></div></body></html>

4.效果图

css设置滚动条、并设置滚动条样式相关推荐

怎样设置网页纵向滚动 css,CSS 怎么设置网页下拉条 (滚动条) 样式?
CSS 怎么设置网页下拉条 (滚动条) 样式? 很多朋友在网页设计中要自定义下拉条 (滚动条) 样式的情景, 下拉条的样式我们可以通过 CSS 来控制的, 下拉条能不能换颜色或者做的更好看一些呢? 那 ...
css设置滚动条样式，隐藏滚动条，设置滚动条宽度及背景色
去掉滚动条: #table_show_content::-webkit-scrollbar{ width: 0px; background: gray; } 设置滚动条粗细: #table_show_ ...
滚动条如何设置样式和滚动条悬浮显示与隐藏
文章目录一.滚动条如何设置样式 1:滚动条的默认样式(如下图) 1:html代码 2:css代码 3:效果图 2:CSS设置滚动条的属性(重点) 3:设置滚动条的例子 1:css代码(在第1步的基础 ...
自定义滚动条使用（scrollbar样式设置）
转自:https://segmentfault.com/a/1190000012800450 PS:非商业用途,如有侵权,请联系删除. 一前言在CSS 中,如果我们在块级容器上设置了属性: ove ...
【Vue】滚动条（设置滚动条、滚动条样式、鼠标移入滚动条显示移出滚动条隐藏....）
目录设置滚动条滚动条样式 1.隐藏滚动条 2.常用滚动条的样式的示例滚动条的应用 1.标签页的内容滚动,标签头部固定 2.鼠标移入显示滚动条,鼠标移出隐藏滚动条 3.实现导航栏鼠标上滑显示下滑隐 ...
html自定义横纵向滚动条,html的滚动条样式设置
如果需要对DIV设置一个滚动条,那么你可能需要设置滚动条的样式,横向或者纵向,需要用overflow-y和overflow-x来设置,今天就来给大家说一下这俩个属性. 对div设置滚动条,设置其横向滚 ...
qt设置滚动区域的滚动条的样式
引言当窗口的控件太多,不能一下完全显示,就可以采用滚动区域来添加控件,这样添加的控件,可以通过滑动滚动区域的滚动条来浏览所有的控件.下面就大致记录一下滚动区域的滚动条的样式怎么设置. 实现直接上设 ...
css如何设置滚动条，设置滚动条需要用到的参数
首先我们来看一下css设置滚动条可能需要的属性. overflow-y:设置当对象的内容超过其指定高度时如何管理内容: overflow-x:设置当对象的内容超过其指定宽度时如何管理内容: 参数: v ...
extjs给panel添加滚动条_ExtJs Panel 滚动条设置
设置autoscroll:true同时出现横向和纵向滚动条. 不要设置autoscroll属性,或者autoscroll:false,然后设置bodyStyle : 'overflow-x:hidde ...
如何设置修改网页中滚动条
通过css设置滚动条在所有浏览器,滚动条可定制性最强的当属webkit内核的浏览器了.因为源代码开放的原因,市面上基于webkit内核的浏览器也是很难穷举完.例如有:Google Chrome.Op ...

css设置滚动条、并设置滚动条样式

1.overflow设置滚动条

2.设置滚动条样式

3.html整体代码

4.效果图

css设置滚动条、并设置滚动条样式相关推荐

最新文章

热门文章