用css怎么设置div滚动条的样式,可改变大小的

 我来答
惠企百科
2022-12-02 · 百度认证:北京惠企网络技术有限公司官方账号
惠企百科
惠企百科网是一家科普类综合网站,关注热门中文知识,集聚互联网精华中文知识,本着自由开放、分享价值的基本原则,向广大网友提供专业的中文知识平台。
向TA提问
展开全部

在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.代码嫌蠢明工作做完后,就可以查看效果,效果如下红框所示,滚档渗动条设置完成。

走近植物世界
高粉答主

推荐于2019-10-14 · 关注我不会让你失望
知道答主
回答量:461
采纳率:0%
帮助的人:12万
展开全部

在css样式中设置浏览器滚动条样式操作步骤如下:

1.打开软件,新建html文档,如下图红框所示为新建界面。

2.在</head>和<body>中间书写hmtl代码,<div>这里面输入你想要输入的内容即可</div>,如下图红框所示。

3.然后在<body>和</body>中间书指老写外层轨道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.以上代码代码输入完成,就可以运行看效果,效果如下红框所示,滚动条凳谈设置完成,唯粗升如果不喜欢样式,回去修改代码属性即可。

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
搞怪一乐
高粉答主

推荐于2019-11-12 · 醉心答题,欢迎关注
知道小有建树答主
回答量:477
采纳率:100%
帮助的人:15.2万
展开全部

在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.代码工作做完后,就可以查看效果,效果如下红框所示,滚动条设置完成。棚世猛

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
大头9uQ媂H
推荐于2017-09-12 · TA获得超过266个赞
知道答主
回答量:101
采纳率:0%
帮助的人:128万
展开全部
overflow: auto; 在需要时内容会自动添加滚动条 overflow: scroll; 总是显示滚动条 overflow-x: hidden; 禁止横向的滚动条 overflow-y: scroll; 总是显示纵向滚动条width: 568px; width: 98%; 设置区域的宽度[像素/百分比等等]height: 120px; 设置区域的高度[像素/百分比等等]<STYLE>BODY {SCROLLBAR-FACE-COLOR: #f892cc; SCROLLBAR-HIGHLIGHT-COLOR: #f256c6; SCROLLBAR-SHADOW-COLOR: #fd76c2; SCROLLBAR-3DLIGHT-COLOR: #fd76c2; SCROLLBAR-ARROW-COLOR: #fd76c2; SCROLLBAR-TRACK-COLOR: #fd76c2; SCROLLBAR-DARKSHADOW-COLOR: #f629b9; SCROLLBAR-BASE-COLOR: #e9cfe0}</STYLE>SCROLLBAR-FACE-COLOR: 滚动条凸出部分的颜色 SCROLLBAR-HIGHLIGHT-COLOR: 滚动条空白部分的颜色 SCROLLBAR-SHADOW-COLOR: 立核升体滚动条阴影的颜色 SCROLLBAR-3DLIGHT-COLOR: 滚动条亮边的颜色 SCROLLBAR-ARROW-COLOR: 上下按斗滑钮上空氏腊三角箭头的颜色 SCROLLBAR-TRACK-COLOR: 滚动条的背景颜色 SCROLLBAR-DARKSHADOW-COLOR: 滚动条强阴影的颜色 SCROLLBAR-BASE-COLOR: 滚动条的基本颜色自己定义滚动条的颜色。一般默认的滚动条样式如下左图,右图是放大了1600倍的样子,我们可以看到滚动条有几种言责组合的,我给他们标了7个号,分别注释在下面的css代码的后面了,注意css的注释代码是放在两个斜杠内的两个星号之间。如:/*这里放注释的代码*/Body { scrollbar-arrow-color: #f4ae21; /*三角箭头的颜色*/ scrollbar-face-color: #333; /*立体滚动条的颜色*/ scrollbar-3dlight-color: #666; /*立体滚动条亮边的颜色*/ scrollbar-highlight-color: #666; /*滚动条空白部分的颜色*/ scrollbar-shadow-color: #999; /*立体滚动条阴影的颜色*/ scrollbar-darkshadow-color: #666; /*立体滚动条强阴影的颜色*/ scrollbar-track-color: #666; /*立体滚动条背景颜色*/scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/ Cursor:url(mouse.cur); /*自定义个性鼠标*/ }以上2项适用与<body>、<div>、<textarea>、<iframe>希望对你有所帮助。
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
蓝叶资源分享
推荐于2017-09-14 · 分享互联网精品好资源。
蓝叶资源分享
采纳数:555 获赞数:924

向TA提问 私信TA
展开全部
::-webkit-scrollbar{width:14px;}
::-webkit-scrollbar-track{background-color:#bee1eb;}
::-webkit-scrollbar-thumb{background-color:#00aff0;}
::-webkit-scrollbar-thumb:hover {background-color:#9c3}
::-webkit-scrollbar-thumb:active {background-color:#00aff0}

这段代码放倒CSS文件里去,宽度颜纤明色自己修改,且只在webkit内核浏览器下才埋陆生效,就是谷歌浏览器的内核。毁液告

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(5)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式