overflow产生的滚动条样式设置

点窜overflow发生的滚动条样式 , 本家儿要可以经由过程如下三个伪元素设置:
1)-webkit-scrollbar:设置程度滚动条的高度 , 垂直滚动的宽度
2)-webkit-scrollbar-thumb:设置滚动条里面的滑块样式
3)-webkit-scrollbar-track:设置滚动条的轨道布景样式
4)本文默认利用chrome浏览器查看运行结果
方式/
1新建一个html文件叫做CssOverFlow.html(有html编纂东西的 , 就利用东西建立 。 没有东西的 , 可以先建立文本文件 , 再点窜文件名即可)

overflow产生的滚动条样式设置



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

overflow产生的滚动条样式设置



3【默认的overflow样式】运行结果如下(横标的目的和纵标的目的都发生了滚动条)

overflow产生的滚动条样式设置



4【overflow产生的滚动条样式设置】【点窜后overflow样式】代码如下(点窜滚动条的宽度、布景色等样式)

overflow产生的滚动条样式设置



5【点窜后overflow样式】运行结果如下(宽度削减了 , 布景色改变了)

overflow产生的滚动条样式设置



6只要程度偏向上的滚动条 , 则埋没垂直滚动条 , 利用代码:overflow-x:auto;overflow-y:hidden

overflow产生的滚动条样式设置



7只要垂直偏向上的滚动条 , 则埋没程度滚动条 , 利用代码:overflow-x:hidden;overflow-y:auto

overflow产生的滚动条样式设置




以上内容就是overflow产生的滚动条样式设置的内容啦 , 希望对你有所帮助哦!

    猜你喜欢