[璃猫]

璃猫博客

limao.pro

CSS设置滚动条相关属性

Aurora

February 16, 2021

访问: 57 次

0 Comments

189字数

#

CSS 样式表

首页 / CSS 样式表正文

滚动条

显示隐藏滚动条

body,html{
   overflow-y: scroll;   //纵向显示滚动条
   overflow-x: hidden;   //横向隐藏滚动条
}


设置属性

/* 设置滚动条的样式 */
::-webkit-scrollbar {
   width:12px;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
   -webkit-box-shadow:rgba(255,255,255,1);
   border-radius:10px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
   border-radius:10px;
   background:rgba(0,0,0,0.1);
}


滚动条理解

1. ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的
2.::-webkit-scrollbar-button 滚动条两端的按钮
3. ::-webkit-scrollbar-track  外层轨道
4. ::-webkit-scrollbar-track-piece  内层滚动槽
5. ::-webkit-scrollbar-thumb 滚动的滑块
6. ::-webkit-scrollbar-corner 边角
7. ::-webkit-resizer 定义右下角拖动块的样式

理解图


滚动条扩展

1. scrollbar-arrow-color: color; /*三角箭头的颜色*/
2. scrollbar-face-color: color; /*立体滚动条的颜色(包括箭头部分的背景色)*/
3. scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/
4. scrollbar-highlight-color: color; /*滚动条的高亮颜色(左阴影?)*/
5. scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/
6. scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/
7. scrollbar-track-color: color; /*立体滚动条背景颜色*/
8. scrollbar-base-color:color; /*滚动条的基色*/

本文为原创知识文章,版权归 璃猫博客 所有,转载请注明出处!

本文链接: https://www.limao.pro/archives/058.html

友情提示:如果博客部分链接出现404,请留言或者 联系博主 修复。

最后修改时间:February 16, 2021

© 本文允许规范转载

嗨!猫客,不妨给 5秒 时间,赞赏一下本博客吧!( 其实本博主在按钮里藏了支付宝红包哦~ )

上一篇
下一篇

发布你的观点趴i

评论 ( 请使用真实邮箱地址,以便接收评论回复信息 )

选择表情

还没有小可爱发布评论呢~ o(╥﹏╥)o

下面没有内容啦!(°Д°) 太长啦~我快被撑爆啦!o(╥﹏╥)o

热门文章
TYPECHO恋爱主题 - 往后余生 November 29, 2020
CSS样式表 November 26, 2020
JAVA环境安装与编程软件Eplices安装教程 November 23, 2020

站内活动 时间一般均为 7天 时间

欢迎各位猫客,本站运营初期,不足之处欢迎大家指点。(灬°ω°灬)

博客资料
  • 文章数目

    70

  • 评论数目

    9

  • 站内页面

    3

  • 运行天数

    0年202天

广而告之
我在等你呢~
[享受生活 做最酷的自己]
[头像]

Aurora

环游是无趣,至少可以陪着你~

×
SUPPORT