overflow产生的滚动条样式设置

修改overflow产生的滚动条样式,主要可以通过如下三个伪元素设置:

1)-webkit-scrollbar:设置水平滚动条的高度,垂直滚动的宽度

2)-webkit-scrollbar-thumb:设置滚动条里面的滑块样式

3)-webkit-scrollbar-track:设置滚动条的轨道背景样式

4)本文默认使用chrome浏览器查看运行效果

方法/步骤

新建一个html文件叫做CssOverFlow.html(有html编辑工具的,就使用工具创建。没有工具的,可以先创建文本文件,再修改文件名即可)

自动草稿
【默认的overflow样式】代码如下(当外层高宽比内部内容高宽小,且设置了overflow:auto,就会有滚动条产生)

自动草稿
【默认的overflow样式】运行效果如下(横向和纵向都产生了滚动条)

自动草稿
【修改后overflow样式】代码如下(修改滚动条的宽度、背景色等样式)

自动草稿
【修改后overflow样式】运行效果如下(宽度减少了,背景色改变了)

自动草稿
只要水平方向上的滚动条,则隐藏垂直滚动条,使用代码:overflow-x:auto;overflow-y:hidden

自动草稿
只要垂直方向上的滚动条,则隐藏水平滚动条,使用代码:overflow-x:hidden;overflow-y:auto

自动草稿

本文链接: https://www.xker.com/a/12259.html (转载请保留)

本文版权归原作者所有,转载此文是出于传递更多信息之目的,观点不代表本站立场,请核实内容准确性!若有来源标注错误或侵犯了您的合法权益,请与本网联系,我们将及时更正,谢谢。

发表评论

邮箱地址不会被公开。 必填项已用*标注