【只总结webkit的，IE与firefox暂不做记录】

呼出与关闭滚动条

1.如果是浏览器的滚动条，其依赖的是html标签，我们不需要设置，内容溢出会自动出现

/*对html标签的溢出样式隐藏即可*/
html {overflow-x:hidden; //隐藏水平滚动条overflow-y:hidden;//隐藏垂直滚动条
}

2.在需要呼出滚动条的div盒子里设置

overflow：scroll //内容溢出的时候x轴的y轴的滚动条都会展现
overflow-y：scroll //内容溢出的时候只会呼出y滚动条【常用】
overflow-x：scroll //内容溢出的时候只会呼出x滚动条

认识滚动条

参考：https://segmentfault.com/a/1190000012800450?utm_source=tag-newest

这些都是容器中滚动条的可设置的元素：

::-webkit-scrollbar    //滚动条整体部分
::-webkit-scrollbar-button   //滚动条两端的按钮
::-webkit-scrollbar-track   // 外层轨道
::-webkit-scrollbar-track-piece    //内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-thumb //滚动条里面可以拖动的那个
::-webkit-scrollbar-corner   //边角
::-webkit-resizer   ///定义右下角拖动块的样式

这些元素后面还可以跟一些事件：

:horizontal//适用于任何水平方向上的滚动条
:vertical//适用于任何垂直方向的滚动条
:decrement//适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮
:increment//适用于按钮和轨道碎片。表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮
:start//适用于按钮和轨道碎片。表示对象（按钮轨道碎片）是否放在滑块的前面
:end //适用于按钮和轨道碎片。表示对象（按钮轨道碎片）是否放在滑块的后面
:double-button//适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。
:single-button//适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。
:no-button//表示轨道结束的位置没有按钮。
:corner-present//表示滚动条的角落是否存在。
:window-inactive//适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。

用法举例：

xxx::-webkit-scrollbar-track-piece:start {/* Select the top half (or left half) or scrollbar track individually */
}xxx::-webkit-scrollbar-thumb:window-inactive {/* Select the thumb when the browser window isn't in focus */
}xxx::-webkit-scrollbar-button:horizontal:decrement:hover {/* Select the down or left scroll button when it's being hovered by the mouse */
}

设置滚动条的css参考

【如果要设置浏览器的默认滚动条，在html::元素:事件{} 中直接对html标签进行css修改即可】

不用太多花里胡哨，比较简洁。messageCard是自定义的div容器的class。

.messageCard {overflow-y: scroll;
}
.messageCard::-webkit-scrollbar {width: 4px;
}
.messageCard::-webkit-scrollbar-thumb {border-radius: 10px;background: rgba(0,0,0,0.2);
}
.messageCard::-webkit-scrollbar-track {border-radius: 0;background: rgba(0,0,0,0.1);
}

把浏览器的也改改：

/* 一般浏览器的不要太小，容易看不见 */
html::-webkit-scrollbar {width: 8px;
}
html::-webkit-scrollbar-thumb {border-radius: 5px;background: rgba(0,0,0,0.2);
}
html::-webkit-scrollbar-track {border-radius: 0;background: rgba(0,0,0,0.1);
}

【CSS】滚动条样式详解相关推荐

CSS超链接样式详解
CSS超链接样式详解 1.超链接伪类 2.深入了解:hover :hover用于div :hover用于img 3.鼠标样式浏览器鼠标样式自定义鼠标样式 1.超链接伪类在CSS中,我们可以使用& ...
animate.css动画样式详解
一.使用步骤 <!-- <link rel="stylesheet" href="https://www.jq22.com/jquery/animate-3. ...
CSS 列表样式详解
CSS列表用于前端的列表排列. CSS列表属性作用如下: 设置不同的列表项标记为有序列表设置不同的列表项标记为无序列表设置列表项标记为图像列表在HTML中,有两种类型的列表: 无序列表 - 列 ...
JSX设置CSS样式详解
JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...
html 仿word页面,HTML+CSS入门 HTML页面仿WORD样式详解
本篇教程介绍了HTML+CSS入门 HTML页面仿WORD样式详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 要求不再浏览器中添加office插件的前提下.展示WOR ...
css改变伪元素color_jQuery教程改变css伪元素样式详解
本篇教程介绍了jQuery教程改变css伪元素样式详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < 首先我们看一下css伪元素是什么: CSS 伪元素用于向某 ...
[转]CSS hack大全详解
转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...
网页设计中的默认字体样式详解
浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏 ...
devexpress 中的checkboxlist怎么设置间距_HTML中怎么设置h1的字体样式你知道吗？关于设置h1标签的样式详解
本篇文章主要为大家讲解了html中的h1标签的样式解析,但是如果不用css样式来做的话,那就只能在html4.01中显示了,所以我们还是尽快学习css层叠样式表吧,好了,现在让我们来说说这篇文章吧. ...

【CSS】滚动条样式详解

呼出与关闭滚动条

认识滚动条

设置滚动条的css参考

【CSS】滚动条样式详解相关推荐

最新文章

热门文章